面试官问：wepack做过相关优化吗？之：DllPlugin和DllReferencePlugin

一朵雨做的云
683 阅读3分钟

最近参加一些面试，经常被问道几个问题，所以回来研究了一下webpack打包优化之：DllPlugin和DllReferencePlugin。 相信很多同学在做项目的时候，随着项目越来越大，执行npm run build的速度也慢慢变慢。那DllPlugin和DllReferencePlugin的作用就是将第三方库的代码跟业务代码抽离，只有当第三方库发生改变的时候才会重新生成，否则每次只需打包业务代码即可，话不多说，开撸吧。（此处默认已经有下载vue-cli项目）

1、准备工作：将默认的webpack.config.js抽离出来

安装vue-cli的同学，webpack.congfig.js一般都是在根目录下面的

alt
现在将项目的配置文件都放在根目录下的新建的build文件夹（因为配置较多，统一管理，就是下面显示的这样）

之前启动项目的时候npm run dev是默认找到根目录下面的webpack.congfig.js，现在位置发生变化，因此需要改一下package.json里面的配置，现改为如下所示：

此时再运行npm run dev 能够启动项目，说明准备工作已经做好了。

2、生成依赖文件manifest.json

在build文件夹下面新建webpack.dll.conf.js，其作用主要是用于生成manifest.json文件，该文件的主要作用是用于形成映射关系，用于项目业务代码打包的时候知道第三方库无需打包，下面主要是webpack.dll.conf.js的配置：

const path = require('path')
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: [
      'axios',
      'vue',
      'vue-router',
      'vuex',
      'qs'
    ]
  },
  output: {
    filename: 'dll/[name].dll.js',
    path: path.resolve(__dirname, '../static/js/'),
    library: '[name]', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, './manifest.json'), // 本Dll文件中各模块的索引，供DllReferencePlugin读取使用
      name: '[name]',
    }),

    //压缩 只是为了包更小一点 
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console:true,
        drop_debugger:true
      },
      output:{
        // 去掉注释内容
        comments: false,
      },
      sourceMap: true
    })
  ],
}

执行该配置文件的package.json配置：

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config build/webpack.config.js",
    "dll": "webpack -p --progress --config build/webpack.dll.conf.js",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

在执行命令之前，需要在项目中建立static/js文件夹，用于存放打包生成的第三方库的js,执行命令：npm run dll,随后就在static/js中生成vendor.dll.js啦，同时在build文件夹中也生成manifest.json文件啦：

3、最后一步！

最后一步，当然是我们的业务代码打包了，回归到第一个问题，其实webpack.config.js一般都是用于业务代码打包，不同的是，之前默认是将所有的程序打包在一起， 但是在第二步已经将第三方库进行打包了，接下来业务代码就无需打包了，就用到了 manifest.json和DllReferencePlugin。 其实很简单，只需要在webpack.config.js中加入如下配置：

 plugins: [
        new webpack.DllReferencePlugin({
            // context: path.resolve(__dirname, '..'),
            manifest: require('./manifest.json')
        })
    ]

就可以啦，执行npm run dev就可以打包出业务代码，速度明显比之前快很多！

4、注意事项

第二步打包生成的vendor.dll.js需要在页面中引入，引入的顺序需要在业务代码的前面，否则会报vendor undefined的错误。

结束语

每天进步一点点，笔芯。 若是喜欢，欢迎点赞。

avatar
文章
阅读
粉丝