5分钟搞定vue-cli3Dll优化

在vue项目中因为第三方包，诸如vue，vue-router， axios，vuex都会打包到vendor.js里，vendor.js过大，导致打包速度慢，首页加载慢。

对于打包速度，主要受两点影响：一是处理内容的多少，二是处理步骤的多少。 在实际项目中，第三方库，一般只需要处理一次，不需要每次打包都要处理。

Dll优化

即第三方库预先处理， 实现了拆分 bundles，后续打包不放入vendor.js中，从而大大提升了构建速度。

在实现预处理之前，先介绍下主要用的的两个工具 DLLPlugin 和 DLLReferencePlugin。

DllPlugin

这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

DllReferencePlugin

这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。 通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上， ，之后再在需要的时候通过内置的 webpack_require 函数来 require

废话不多说，撸起袖子干！！

Dll优化分为两个步骤：

1.  预处理第三方库
2. 告诉webpack 打包的时候不需要处理这些第三方库

• 在vue-cli3搭建的项目中，在build文件夹下创建webpack.dll.js文件

      const path = require('path')
      const webpack = require('webpack')
      
      module.exports = {
          entry: {
              vender: ['vue/dist/vue.esm.js', 'vue-router', 'axios','vuex']
          },
          output: {
              path: path.join(__dirname, '../public/static'),
              filename: "[name].dll.js",
              library: "[name]_library"
          },
          plugins: [
              new webpack.DllPlugin({
                  path: path.join(__dirname,".","[name]-manifest.json"),
                  name: "[name]_library"
              })
          ]
      }
  
  

• 在package.json添加指令

  "dll": "webpack --config build/webpack.dll.js",
  

• 在vue.config.js 配置dll代码

  const webpack = require('webpack');
  const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
  module.exports = {
      ...
      configureWebpack: config => {
          if (isProduction) {
              // dll优化
              config.plugins.push(new webpack.DllReferencePlugin({
                  context: process.cwd(), //当前目录
                  manifest: require('./build/vender-manifest.json')
                 }))
                 // 将打包出来文件动态引入index.html
              config.plugins.push(
                  new AddAssetHtmlPlugin({
                      // dll文件位置
                      filepath: path.resolve(__dirname, './public/static/vender.dll.js'),
                      // dll 引用路径
                      publicPath: '/front/static/', 
                      outputPath: '/static/', // 输出的目录地址
                  })
              )
              ...
         
          }
      }
  }
  

• 执行npm run dll ，只需要执行一次

到此，配置全部完成，后面直接执行npm run build ~~

实践是检验真理的唯一准则！！！

有点小注意！ vue-cl3不像之前cl2会在打包完成后显示打包的时间，如何看打包所用的时间，这里有个小技巧，请笑纳!! 在package.json ，build指令加上--report-json，打包后会生成report.json，里面的time字段就是打包所用时间，这里的--report 会生成report.html文件，可以看打包具体细节

"build": "vue-cli-service build --report-json --report --mode production",

在本人项目中测试结果：打包时间明显减少 ~

 不使用dll优化，

使用dll优化

最后，感谢阅读，希望对你有帮助！