Webpack打包后体积过大的优化思路

本文综合了几篇不错的文章，整理了处理Webpack打包后体积过大的思路，代码主要引自参考文章中，使用时需要根据Webpack版本做调整。
本文主要参考了如下几篇文章：
解决webpack打包文件过大的问题
 webpack + react 优化：缩小js包体积
 前端性能优化：webpack分离 + LocalStorage缓存
 webpack react 文件压缩优化
 【前端构建】WebPack实例与前端性能优化
 Webpack 提取公共模块
 Webpack按需打包Lodash的几种方式
 webpack学习笔记（代码分割，按需加载）
webpack代码分离 ensure 看了还不懂，你打我

优化的具体思路如下：

去除devtool选项

很多教程都会教你在webpack.config.js中设置devtool选项，比如devtool: 'eval-source-map'。
但是这只适用于开发环境，这会造成打包的文件往往有几M，所以在生产环境必须去除此配置。

分离CSS

安装插件：

npm install extract-text-webpack-plugin --save

var ExtractTextPlugin = require("extract-text-webpack-plugin");

...

    loaders:[
      {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
          test: /\.less$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      },

      ...

...

plugins: [
    ...

    new ExtractTextPlugin("bundle.css")
]

使用webpack.optimize.UglifyJsPlugin插件压缩混淆JS代码，使用方法如下：

a. 使用命令：webpack -p
b. 在webpack.config.js文件的plugins数组里面添加及配置插件，具体配置参考UglifyJS2文档
```
new webpack.optimize.UglifyJsPlugin({
    warnings: false,
    compress: {
        join_vars: true,
        warnings: false,
    },
    toplevel: false,
    ie8: false,
}),
```

将React切换到产品环境

在plugins中添加插件

new webpack.DefinePlugin({
  'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
  },
}),

打包时运行

set NODE_ENV=production && webpack -p

分离第三方库

在plugins中加入

new webpack.optimize.CommonsChunkPlugin({
    filename:"common.js",
    name:"commons"
});

按需打包Lodash

使用Lodash时，往往只需要使用其中部分功能，但整个文件引入是不合理的，我们需要通过插件让Webpack按需引入模块。
配置webpack.config.js

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    module: {
        loaders: [{
        loader: 'babel',
        test: /\.js$/,
        exclude: /node_modules/
     }]
 },
 babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime', 'lodash']
 },
 plugins: [
    new LodashModuleReplacementPlugin,
    new webpack.optimize.OccurrenceOrderPlugin,
    new webpack.optimize.UglifyJsPlugin
 ]
}

异步加载模块

对于直接require或import的模块，Webpack的做法是把依赖的文件都打包在一起，造成文件很臃肿。
所以在写代码的时候要注意适度同步加载，同步的代码会被合成并且打包在一起。
异步加载的代码会被分片成一个个chunk，在需要该模块时再加载，即按需加载。

require.ensure([], function(require){
    var list = require('./list');
    list.show();
}, 'list');

此时打包后的js文件名为：list.fb874860b35831bc96a8.js

待补充

Webpack打包后体积过大的优化思路

猜你喜欢