每年培训输出1000+合格IT工程师
培训影响全国各大知名IT企业和部门

webpack实践——DLLPlugin 和 DLLReferencePlugin的使用

DLLPlugin 和 DLLReferencePlugin的使用

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。

1.首先build文件夹添加—-webpack.dll.config.js:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  // 要打包的模块的数组
  entry: {
    vendor: ['vue/dist/vue.esm.js','vue-router']
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',// vendor.dll.js中暴露出的全局变量名。
    library: '[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library', 
      context: __dirname
    }),
  ]
};

2.在package.json的scripts里加上:

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

3.运行npm run dll 在static/js下生成vendor-manifest.json;
4.在build/webpack.base.conf.js里加上:

// 添加DllReferencePlugin插件
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    })
  ],

5.然后在index.html中引入vendor.dll.js:

<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>

至此,配置之后的:
可以看到npm run build后的时间大幅度减少,在dist打包体积上也比之前的小。在项目优化中,可以很大程度上加快项目的构建速度和减少项目的打包体积。

赞(0) 打赏
未经允许不得转载:徐礼文的技术博客 » webpack实践——DLLPlugin 和 DLLReferencePlugin的使用
分享到: 更多 (0)

相关推荐

  • 暂无文章

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏