打包分析

安装

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

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  mode: 'production',
  devtool: 'eval-cheap-module-source-map',
  entry: {
    index: './src/index.js',
    main: './src/main.js'
  },
  output: {
    publicPath: '//cdn.bootcdn.net',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new CleanWebpackPlugin(),
    new BundleAnalyzerPlugin()
  ]
}

运行打包命令后会在浏览器中打开一个分析界面

减少 resolve 的解析

更多细节描述请查看 Resolve官方文档 (opens new window)

Tree Shaking

我们可以使用 Tree Shaking 来去掉没有用到的代码。前面已经介绍过，这里不再赘述，阅读请前往 Tree Shaking 以及官网 Tree Shaking (opens new window)

使用 DLLPlugin

减少 plugin 的消耗

积极更新 webpack 版本

详见官方文档 DllPlugin (opens new window) 。