webpack打包体积优化之分包

最新推荐文章于 2025-05-20 22:52:15 发布

原创最新推荐文章于 2025-05-20 22:52:15 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端

webpack 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何利用Webpack进行分包优化，通过html-webpack-externals-plugin将React和ReactDOM等基础包通过CDN引入，避免打包进bundle文件；并利用DLLPlugin打包基础库到单独文件，减少最终应用包体积。

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')
// }),