乾坤微前端优化（一）

前提

1. 同一个技术，都是react，或者都是vue。

2. 会webpack的dll配置。

思考

发现各个应用之间，第三方的包都是很多的，假如我们在主应用把这些包抽取出来，后面子应用引入，可以极大地减少子应用包的大小。

解决方法

一开始想使用externals来解决这问题，但是发现有一部分插件是不支持umd格式的，所以废弃了这个方案。

后面想到了webpack的dll打包，可以打包抽取不支持umd格式的插件，完美的解决了问题。

开始配置

直接上代码

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');// rc-系列插件
const rcs = ['rc-table', 'rc-select', 'rc-switch', 'rc-picker', 'rc-trigger', 'rc-tree-select', 'rc-menu', 'rc-field-form', 'rc-animate', 'rc-input-number', 'rc-tooltip', 'rc-virtual-list', 'rc-dialog', 'rc-pagination', 'rc-dropdown', 'rc-checkbox', 'rc-resize-observer']
module.exports = {mode: 'production',entry: {react: ['react', 'react-dom', 'react-router-dom'],rc: rcs,echarts: ['echarts'],xlsx: ['xlsx'],vendor: ['axios', 'moment']},output: {filename: 'dll.[name].js',path: path.resolve(__dirname, '../dll'),// 全局变量名称library: '[name]_library'},plugins: [new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '../dll/**/*')]}),new webpack.DllPlugin({// 和library 一致，输出的manifest.json中的name值name: '[name]_library',// path 指定manifest.json文件的输出路径path: path.resolve(__dirname, '../dll/[name]-manifest.json'),}),new BundleAnalyzerPlugin(),]
}

这里抽取了react+react-dom+react-router-dom为一个js，抽取了rc系列为一个js，抽取了echarts为一个js，抽取了xlsx为一个js，最后抽取axios+moment为一个js。
rc系列：antd的实现都是基于这些插件的。
xlsx：是一个读取exlcel表格数据的插件。
echarts：是百度的canvas插件。

出现的问题

1. 抽取了出来的rc.js中存在了react+react-dom+react-router-dom的代码，所以我们引入的时候就可以忽略这个react.js。
2. 引入的时候需要注意顺序，我是引入按照rc，xlsx，echarts，vendor顺序来的。记得rc需要放在第一步。（这个跟先引入react想法一致。）

主应用配置

  // 插件plugins: [// 导入'...['vendor', 'echarts', 'xlsx', 'rc'].map(item => new Webpack.DllReferencePlugin({manifest: path.join(__dirname, `../dll/${item}-manifest.json`)})),...['vendor', 'echarts', 'xlsx', 'rc'].map(item => new AddAssetHtmlWebpackPlugin({filepath: path.resolve(__dirname, `../dll/dll.${item}.js`),outputPath: 'static/dll',publicPath: `${pathName}/static/dll`,hash: true}))].filter(Boolean),

dll的基本配置，注意按照顺序即可。（plugins是从后往前插入的，类似于递归，所以我们需要逆序）

子应用配置

// 插件plugins: [// 导入...['vendor', 'echarts', 'xlsx', 'rc'].map(item => new Webpack.DllReferencePlugin({manifest: path.join(__dirname, `../../cstmr-paltform-base/dll/${item}-manifest.json`)}))].filter(Boolean),

这里其实只需要使用DllReferencePlugin就可以了，告诉webpack来源，并且忽略打包即可。（记住这里忽略了dll.react.js）
这里发现其实引用文件的路径是可以超出本项目的吗，这里就是跨项目了。

打包

打包完即可上线