webpack打包体积优化之分包

1、分包：设置 Externals
 

思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中
方法：使用 html-webpack-externals- plugin

 

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'react',
entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
global: 'React',
},
{
module: 'react-dom',
entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
global: 'ReactDOM',
},
],
}),

 

2、进一步分包：预编译资源模块 

 

思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件 
方法：使用 DLLPlugin 进行分包，DllReferencePlugin 对 manifest.json 引用

 

const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: {
library: [
'react',
'react-dom'
]
},
output: {
filename: '[name]_[chunkhash].dll.js',
path: path.join(__dirname, 'build/library'),
library: '[name]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, 'build/library/[name].json')
})
]
};


使用 DllReferencePlugin 引用 manifest.json

// new webpack.DllReferencePlugin({
// manifest: require('./build/library/library.json')
// }),