前端性能优化三十三：花裤衩模板引入DllPlugin

1. 在项目中引入打包后的dll文件:

在项目中注入第三方的包打包

(1). vue.config.js配置如下:

const dllReference = (config) => {
  config.plugin('vendorDll')
    .use(webpack.DllReferencePlugin, [{
      context: __dirname,
      manifest: require('./public/vendor/vendor-manifest.json')
    }]);
  // 这里是把相关文件引用入到html模板中
  config.plugin('addAssetHtml')
    .use(AddAssetHtmlPlugin, [
      [
        {
          filepath: require.resolve(path.resolve(__dirname, 'public/vendor/vendor_dll.js')),
          outputPath: 'vendor',
          publicPath: 'vendor'
        }
      ]
    ])
    .after('html')
};

module.exports = {
  ...
  // 方法一:实战
  chainWebpack(config) {
    dllReference(config)
  }
  // 方法二
  configureWebpack: {
    plugins: [
      // 插入dll json
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        // 路径要与webpack.dll.config.js中对应
        manifest: require('./public/vendor/vendor-manifest.json')
      })
    ]
  }
}

①. 告诉webpack哪些文件已被预编译,构建过程中忽略这些已预编译的文件.

(2). public/index.html中加载生成的dll文件(不推荐):

<script src="./vendor/vendor.dll.js"></script>

①. 经过上面的配置,公共库提取出来了,编译速度快了,不引用生成的dll文件,网页是不能正常工作的.

②. 手工插入script不太优雅.

(3). 自动引入生成的dll文件(推荐):

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
module.exports = {
    ...
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
    configureWebpack: {
        plugins: [
          ......
          // 将dll注入到生成的html模板中
          new AddAssetHtmlPlugin({
            // dll文件位置路径
            filepath: path.resolve(__dirname, './public/vendor/*.js'),
            // dll引用路径,注入到html中的路径
            publicPath: './vendor',
            // dll最终输出的目录
            outputPath: './vendor'
          })
        ]
    }
}