将package.json下的dependencies依赖的库自动抽离为dll资源

在webpack打包时,第三方库的引用会降低打包速度,而且在打包后资源过大,发布上线后,资源加载慢。这时可以考虑把第三方库抽离出来。

步骤:

1,读取package.json下依赖的第三方库,作为webpack.dll.config的入口文件,配置如下:

  output: {
    path: path.resolve(__dirname, "../src/static/"),
    filename: "[name].js",
    library: "[name]",
  },
  entry: {
    vendor: vendors,
  },
  plugins: [
    // 代码混淆
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.DefinePlugin({
      "process.env": {
        "NODE_ENV": JSON.stringify("production")
      }
    }),
    new webpack.DllPlugin({
      path: "dll/manifest.json",
      name: "[name]",
      context: path.resolve(__dirname, "../"),
    }),
  ],

2,执行打包后将vendors列表,写入配置文件pkg.vendors.config.js,在第二次执行时,判断配置文件pkg.vendors.config.js和package.json下的dependencies是否相等,若相等,跳过


var packagePath = path.resolve(__dirname, './pkg.vendors.config.json');
console.log('packagePath',packagePath)

if(!fs.existsSync(packagePath) ){
  fs.writeFileSync(packagePath,
    JSON.stringify({})
  )
}
var pkgVendorsConfig = JSON.parse(fs.readFileSync(packagePath));
var vendors = util.getVendors(); //获取第三方库(package.json)
if (!pkgVendorsConfig.dependencies || !list_equal(pkgVendorsConfig.dependencies, vendors)) {
  console.log('run `webpack --config config/webpack.dll.js --progress`......');
  var ps = exec('webpack --config config/webpack.dll.js --progress'),
    buffer = '';
  ps.stdout.on('data', function(data) {
    buffer += data;
    process.stdout.write(data);
  });
  ps.stderr.on('data', function(data) {
    buffer += data;
    process.stdout.write(data);
  });
  ps.on('exit', () => {
    if (buffer.indexOf('ERROR in dll lib') >= 0) {
      console.error('=====error occured,stop start server!!!=====');
      return;
    } else {
      illidanCfg.dependencies = vendors;
      fs.writeFileAsync(packagePath, JSON.stringify(illidanCfg, null, '  '));
    }
}

3, build时配置插件DllReferencePlugin

     new webpack.DllReferencePlugin({
        context: path.resolve(__dirname, "../"),
        manifest: require("../dll/manifest.json"),
      }),

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值