vue-cli3 webpack分离公共库 试试Dllplugin

vue 开发过程中，保存一次就会编译一次，如果能够减少编译的时间，哪怕是一丁点，也能节省不少时间。开发过程中个人编写的源文件才会频繁变动，而一些库文件我们一般是不会去改动的，比如 vue vuex vue-router，axios等等。如果能把这些库文件提取出来，就能减少打包体积，加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。

一开始 npm run build 打包一下，看看花多少时间

介绍

Webpack 社区有两种方案

• CommonsChunkPlugin
• DLLPlugin

对于 CommonsChunkPlugin，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而 DLLPlugin 则是能把第三方代码完全分离开，即每次只打包项目自身的代码。Dll这个概念是借鉴了Windows系统的dll，一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。

yarn add webpack-cli add-asset-html-webpack-plugin clean-webpack-plugin --dev

webpack.dll.conf.js

在项目根目录下新建 webpack.dll.conf.js，

const path = require('path')
const webpack = require('webpack')
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin')

// dll文件存放的目录
const dllPath = 'public/vendor'

module.exports = {
  entry: {
    // 需要提取的库文件
    vendor: ['vue', 'vue-router', 'vuex']
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: '[name].dll.js',
    // vendor.dll.js中暴露出的全局变量名
    // 保持与 webpack.DllPlugin 中名称一致
    library: '[name]_[hash]'
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(),
    // 设置环境变量
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: 'production'
      }
    }),
    // manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // 保持与 output.library 中名称一致
      name: '[name]_[hash]',
      context: process.cwd()
    })
  ]
}

生成 dll

在 package.json 中加入如下命令

"scripts": {
    ...
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
},

yarn run dll

忽略已编译文件

为了节约编译的时间，这时间我们需要告诉 webpack 公共库文件已经编译好了，减少 webpack 对公共库的编译时间。在项目根目录下找到 vue.config.js ( 没有则新建 )，配置如下:

    config.plugins.push(
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require('./public/vendor/vendor-manifest.json')
      }),
    )

index.html 中加载生成的 dll 文件

• 手动 在index.html上，插入script

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

• 自动 vue.config.js 在 configureWebpack plugins 节点下，配置 add-asset-html-webpack-plugin

  configureWebpack: config => {
    config.plugins.push(
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require('./public/vendor/vendor-manifest.json')
      }),
      new AddAssetHtmlPlugin({
        // dll文件位置
        filepath: path.resolve(__dirname, './public/vendor/*.js'),
        // dll 引用路径
        publicPath: './vendor',
        // dll最终输出的目录
        outputPath: './vendor'
      })
    )
}

打包成功后看一下编译后index.html

测试

配好了之后 npm run build 看时间

修改页面 npm run build 一下 看时间

是相对之前快很多

我现在一个vue-cli3初始的项目，打包一下可以不到4s