详解基于DllPlugin和DllReferencePlugin的webpack构建优化

一个基于vue-cli webpack2模板创建的项目.项目中使用到了vue+vue-router+axios+muse-ui+iview
现在构建一次需要的时间大概是40s左右.真心受不了.虽然在开发过程中,我们不太需要关心构建时间.但是如果在开发hybridApp时,构建的次数就会增多.

一般我们可以把项目分为三部分.

vendor_library:比如vue,vue-router,axios 这些变动频率极低的文件可以利用 DllPlugin 和 DllReferencePlugin 进行预编译.

vendor,code在开发阶段,每次构建都需要编译.但是一旦完成该次开发任务,应该调整vendor 是否加入vendor_library.

BundleAnalyzerPlugin 的插件使用

BundleAnalyzerPlugin 是分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者的插件。

vue已经默认集成了该插件. 如果你运行 npm run build –report.就能看到当前项目的依赖情况.然后做出相应调整.

优化方向

按需加载

muse-ui,iview 都提供了按需加载的方式,按照文档调整即可.

先看结果…你没看错,\’优化后\’,时间竟然变长了…😂.不过这也正常,之前的依赖直接获取的是dist目录的文件,现在需要在src目录下获取.增加了编译的过程.

但是文件大小的减少还是喜人的.当然,这取决于项目中对模块的使用程度.在我们这个项目中iview只使用了的四个控件.结果上看,显然还是按需加载比较划算.不过这个不算是时间上的优化,只是因为dll可以解决构建时间问题,使按需加载变的更好用.

DllPlugin 和 DllReferencePlugin 预编译资源模块

Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。

打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。

这么一来有几个好处：

Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。

App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。

假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。

网上抄的… 其实意思就是我们可以把项目的公共模块,基本不会改动的模块.想我们刚才说的定义为vendor_library的内容,进行预编译编译.以后在项目构建过程中,vendor_library部分直接引用,就不需要再编译了.

这也是为什么按需加载可以得到更好的使用,正常构建流程,因为使用了按需加载,会导致每次的构建都比使用全量加载用时要长.而使用dll,核心库只需要编译一次,以后直接引用即可.

先来看一下改进结果：

哈哈,有没有快到飞起！！！

DllPlugin 和 DllReferencePlugin 使用

新建webpack.dll.conf.js文件

//webpack.dll.conf.js
process.env.NODE_ENV = \'production\'
const path = require(\'path\');
var utils = require(\'./utils\')
var vueLoaderConfig = require(\'./vue-loader.conf\')
var ExtractTextPlugin = require(\'extract-text-webpack-plugin\')
var OptimizeCSSPlugin = require(\'optimize-css-assets-webpack-plugin\')
const webpack = require(\'webpack\');
//vue项目默认有一个static目录.我就把导出目录放在了static/dll/目录下
const srcPath = path.join(__dirname, \'../static/dll/\');
//需要编译的模块
const vendors = [\'vue/dist/vue.esm.js\',
  \'vue-router\',
  \'vue-localstorage\',
  \'material-design-icons/iconfont/material-icons.css\',
  \'iview/dist/styles/iview.css\',
  \'iview/src/components/tag/tag.vue\'
  \'muse-ui/src/appBar\'
];
webpackConfig = {
  entry: {
    vendor: vendors
  },
  resolve: {
    extensions: [\'.js\', \'.vue\', \'.json\']
  },
  module: {
    loaders: [
      {
        test: /\\.vue$/,
        loader: \'vue-loader\',
        options: vueLoaderConfig
      },
      {
        test: /iview.src.*?js$/,
        loader: \'babel-loader\'
      },
      {
        test: /muse-ui.src.*?js$/,
        loader: \'babel-loader\'
      },
      {
        test: /\\.css$/,
        use: ExtractTextPlugin.extract({
          use: \"css-loader\"
        })
      },
      {
        test: /\\.(woff2?|eot|ttf|otf|svg)(\\&;.*)?$/,
        loader: \'url-loader\',
        options: {
          publicPath: \'./\',
          limit: 1000,
          name: \'fonts/[name].[ext]\'
        }
      }]
  },
  output: {
    path: srcPath, // 输出的路径
    filename: \'[name].dll.js\', // 输出的文件，将会根据entry命名为vendor.dll.js
    library: \'[name]_library\' // 暴露出的全局变量名
  },
  plugins: [
    new ExtractTextPlugin({
      filename: \'[name].dll.css\'
    }),
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    new webpack.optimize.UglifyJsPlugin({ // uglifjs压缩
      compress: {
        warnings: false
      }
    }),
    new webpack.DllPlugin({
      path: path.join(srcPath, \'[name]-mainfest.json\'), // 描述依赖对应关系的json文件
      name: \'[name]_library\',
      context: __dirname // 执行的上下文环境，对之后DllReferencePlugin有用
    })
  ]
}
if (process.env.npm_config_report) {
  var BundleAnalyzerPlugin = require(\'webpack-bundle-analyzer\').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig;

其实这就是一个正常的构建文件.根据你的项目进行修改即可.唯一不同的是在plugins多了一个DllPlugin.他会生成一个描述依赖对应关系的json文件.

static目录如下:

|____dll
| |____fonts
| |____vendor-mainfest.json
| |____vendor.dll.css
| |____vendor.dll.js

修改模板index.html 根据你的构建结果做修改.

//head 标签
<link type=\"text/css\" rel=\"stylesheet\" href=\"./static/dll/vendor.dll.css\" rel=\"external nofollow\" >
//body 标签
<script src=\"./static/dll/vendor.dll.js\"></script>

修改webpack.base.conf.js

plugins: [
    ...,
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require(\'../static/dll/vendor-mainfest.json\') // 指向生成的json文件
    })
  ]

执行

webpack --config ./build/webpack.dll.conf.js

你也可以将该语句放入npm run 中.\’build:dll:report\’ 是为了优化dll依赖关系,添加的另外一条命令.上文已经提过,我们可以借用BundleAnalyzerPlugin插件查看当前包的依赖情况,和包体组成情况.

 //package.json
\"scripts\":{
  \"build:dll\": \"webpack --config ./build/webpack.dll.conf.js\",
  \"build:dll:report\": \"npm run build:dll --report\"
}

npm run build …看看这次的构建时间吧 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。