webpack 配置优化问题

1 antd按需加载
antd 是ant-design的缩写，是蚂蚁金服的一款基于react的前端 UI组件，不做过多介绍，总之很强大
在antd官网（当前页面向下拉）的组件中有介绍按需加载的使用，这里在写一遍：


使用babel-plugin-import插件


1.1 方法一 (推荐)


1 安装插件 npm install --save-dev babel-plugin-import


2 在根目录下创建.babelrc文件，并把以下代码填入


{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}
然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式


// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';
此时此刻这段代码也可以注释掉了 import 'antd/dist/antd.css';


1.2 方法二


手动引入
import DatePicker from 'antd/lib/date-picker';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS
// import 'antd/lib/date-picker/style';         // 加载 LESS
通过antd的按需加载成功将打包文件从13.3MB缩小到7.73MB
2 使用webpack压缩插件
1 安装


npm i -D uglifyjs-webpack-plugin
2 使用


    //在webpack.config.js文件中做如下配置
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');


    plugins: [
         new UglifyJSPlugin()
    ]
通过代码压缩的方式成功将打包文件从7.73MB缩小到7.7MB
3 使用webpack的新特性：ModuleConcatenationPlugin
webpack3.0以上版本新增了一个特性，ModuleConcatenationPlugin，具体效果太过复杂不做过多的介绍，只要能缩小打包文件就足够了，并且没有其他影响


使用方法


//直接在webpack.config.js中写入如下代码即可
plugins: [
        new webpack.optimize.ModuleConcatenationPlugin()
    ]
通过上述方法的修改，成功将打包文件从7.7MB缩小到7.47MB
4 提取第三方库
webpack 在打包过程中，也会将react react-dom react-router 等相关文件一起打包到文件中


4.1 方法一


在webpack.config.js中做如下配置


    entry: {
        bundle :__dirname + "/src/js/root.js",               //已多次提及的唯一入口文件
        vendor: ['react','react-dom','react-router-dom','react-responsive'] //在此处配置
    }
    
        plugins: [
        new webpack.optimize.CommonsChunkPlugin({ 
            name: 'vendor', 
            filename: 'vendor.bundle.js' 
        }),
    ]
经过上面的配置后对应的文件夹中会生成vendor.bundle.js文件，该文件就是公共模块(但是每次打包都会生成公共模块)，此时还需在html文件中将公共模块引入，注意：公共模块要放在前面


经过如上配置成功将打包文件从7.47MB缩小至5.04MB
4.2 方法二（推荐）


1 在根目录下创建webpack.dll.config.js文件,并填写如下配置


const path    = require('path');
const webpack = require('webpack');


module.exports = {
    entry: {
        bundle: ['react','react-dom','react-router-dom','react-responsive']  //提取公共模块
    },
    output: {
        path: path.join(__dirname, 'src/js'),
        filename: '[name].dll.js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'src/js','[name]-manifest.json'),


            name: '[name]_library'
        })
    ]
};
2 在 webpack.config.js中做如下配置


        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./src/js/bundle-manifest.json')
        }),
3 执行 --config webpack.dll.config.js


4 执行 webpack --config webpack.config.js


此时目录下会出现两个文件 bundle-manifest.json 和 bundle.dll.js（公共模块），接下来每次只需打包业务逻辑的代码就可以了，若公共模块版本更新 再次执行 第4步即可。


html目录引用


//注意公共模块要放在前面
<script src="/src/js/bundle.dll.js"></script> 
<script src="http://localhost:8080/bundle.js"></script>
经过上述方法处理后成功将打包文件从7.47MB缩小至5.08MB
5 将开发环境改为生产环境
将webpack.config.js中的devtool 设置为 false
devtool: 'false'
此时此刻硕大文件突然就从5.08MB变为了665kb