webpack优化问题

如何提高打包构建速度

externals

externals配置可以用来提取常用库

用DllPlugin和DllReferencePlugin（webpack内置插件）

利用DllPlugin和DllReferencePlugin预编译资源模块，通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。需要配合add-asset-html-webpack-plugin（第三方库）一起使用。
具体用法，新建文件webpack.dll.conf.js文件，大概配置如下：

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    vendor: [
    'react-dom',
    'react'//提前打包一些基本不怎么修改的文件
    ]
  },
  output: {
    path: path.join(__dirname, './build/static/js'), //放在项目的static/js目录下面
    filename: '[name].dll.js', //打包文件的名字
    library: '[name]_library' //可选 暴露出的全局变量名
    // vendor.dll.js中暴露出的全局变量名。
    // 主要是给DllPlugin中的name使用，
    // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'), //生成上文说到清单文件，放在当前build文件下面，这个看你自己想放哪里了。
      name: '[name]_library'
    }),  
    //压缩 只是为了包更小一点 
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console:true,
        drop_debugger:true
      },
      output:{
        // 去掉注释内容
        comments: false,
      },
      sourceMap: true
    })
  ]
};

在package.json里面写进去命令

    "build:dll": "webpack --config ./webpack.dll.conf.js//（具体路径自己定）",

DllPlugin会将公共依赖打包成一份JS，并且生成一份json配置表，然后在webpack.prod.conf.js文件中进行配置
大概配置如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('./build/vendor-manifest.json'),
    }),
    new HtmlWebpackPlugin(),
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, './build/*.dll.js'),
    }),
  ],
};

happypack（第三方库）

使用Happypack 实现多线程加速编译

优化打包文件

OccurrenceOrderPlugin（webpack内置插件）

为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多 的模块，然后为他们分配最小的ID

UglifyJsPlugin（webpack内置插件）

压缩代码

clean-webpack-plugin（第三方库）

清空打包输出的文件夹

extract-text-webpack-plugin（第三方库）

它会将入口中引用css文件，都打包都独立的css文件中，而不是内嵌在js打包文件中。