webpack打包的体积越小，对于部署应用的网站来说，性能越好，加载速度越快。

1. 分析打包文件 1. 生成统计信息文件

首先需要通过webpack命令生成统计信息的文件。在package.json的脚本中添加命令

"scripts": { "stats": "webpack --config webpack.prod.js --profile --json > stats.json", //... }

上面的命令会在根目录下生成一个stats.json的打包统计信息文件。

2. 可视化分析

使用插件可视化分析插件：webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer

配置插件的使用信息；

const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin; module.export = { //... plugins: [ new BundleAnalyzerPlugin({ analyzerMode: ‘disabled‘, // 关闭默认启动的展示信息的http服务器 generateStatsFile: true // 打包的时候生成stats.json文件； }), }

从上面配置信息可知，，使用该插件，不需要再手动生成stats.json文件，第一步可以省略。

然后，在脚本中添加手动启动分析器的http

// 分析命令的使用，应该在打包命令之后。因为它的作用就是分析打包后的文件 "scripts": { "build": "webpack --config webpack.prod.js", "analyzer": "webpack-bundle-analyzer ./dist/stats.json --port 8081" }

3. 优化建议

将生成的stats.json文件拖入该网站https://webpack.jakoblind.no/optimize/。

会给出打包体积太大的优化措施。

该插件基于webpack-optimize-helper插件。

2. 抽离css并压缩 1.抽离css

使用mini-css-extract-plugin抽离css

npm install --save-dev mini-css-extract-plugin

在plugins配置文件中使用插件

module.exports = { plugins: [ new MiniCssExtractPlugin({ filename: ‘css/[name].[contenthash:8].css‘ // 将css文件统一放入css文件夹 }) ] }

2. 压缩css

使用optimize-css-assets-webpack-plugin压缩css文件

npm install -D optimize-css-assets-webpack-plugin

在optimization中使用该插件

module.exports = { optimization: { minimize: true, minimizer: [ new OptimizeCssAssetsWebpackPlugin() ] }

3. 移除未使用的css

在大型项目中，经常会有很多样式内容，在代码中根本未使用，但是会被打包，这些样式需要打包时应该移除。

使用purgecss-webpack-plugin移除未使用的css样式。

npm i purgecss-webpack-plugin -D

在pluigns中配置插件

const glob = require(‘glob‘); // 根据路径查找文件 module.exports = {
　 plugins:[ new PurgecssWebpackPlugin({ //paths要求是绝对路径 paths: glob.sync(`${path.join(__dirname, ‘src/**/*‘)}`, { nodir: true }) })
]

3. 复用babal转化时runtime代码

@babel/plugin-transform-runtime

?该插件的引入只能通过.babelrc文件，不能在babel-loader的options中，否则报错。

4. 使用CDN 1. 第三方库使用CDN

new HtmlWebpackExternalsPlugin({ externals: [ { module: ‘lodash‘, global: ‘_‘, entry: ‘https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js‘ } ] })

然后为了避免用户在模块中手动又导入，需要添加

externals: { lodash: ‘_‘ },

2. 项目生成的静态文件可以部署到CDN服务器中

需要配置publicPath为CDN服务器的域名

// output， module->MiniCssWebpackLoader.loader, image等可以部署publicPath publicPath: ‘‘

5. webpack.IgnorePlugin

忽略第三方库中多余的文件夹。

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

上面忽略了moment库中的语言包

6. 图片压缩image-webpack-loader

{ test: /\.(gif|png|jpe?g|svg)$/i, use: [ { loader: ‘url-loader‘, options: { limit: 2 * 1024, outputPath: ‘images‘, name: ‘[name].[contenthash:8].[ext]‘ } }, { loader: ‘image-webpack-loader‘, options: { mozjpeg: { progressive: true, quality: 65 }, // optipng.enabled: false will disable optipng optipng: { enabled: false }, pngquant: { quality: [0.65, 0.90], speed: 4 }, gifsicle: { interlaced: false }, // the webp option will enable WEBP webp: { quality: 75 } } } ] }

7. 使用babel-polyfill的替代方案

如果项目中允许使用外部链接，可以使用

<script src="https://polyfill.io/v3/polyfill.min.js/"></script>

它按照浏览器类型返回需要的内容

 8. TreeShaking 1. 原理：

1）利用es6模块的静态结构，依赖模块命令import/export，进行代码分析，分析出无用/永远不会访问的代码。