webpack 优化产出代码

优化产出代码

• 体积更小
• 合理分包，不重复加载
• 速度更快，内存使用更少

注，产出代码配置 webpack.prod.js 文件

1、小图片 base64 编码

{
    module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,
                        // 打包到 img 目录下
                        outputPath: '/img1/',
                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]
    },
}

2、bundle 加 hash

{
    output: {
        filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
    },
}    

3、懒加载，如

import('./dynamic-data.js')

4、提取公共代码

{
    optimization: {
        // 压缩 css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
        // 分割代码块
        splitChunks: {
            chunks: 'all',
            /**
             * initial 入口chunk，对于异步导入的文件不处理
                async 异步chunk，只对异步导入的文件处理
                all 全部chunk
             */
            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    minSize: 0,  // 大小限制
                    minChunks: 1  // 最少复用过几次
                },
                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }
}

5、IngorePlugin 忽略无用文件

{
    plugins: [
        // 忽略 moment 下的 /locale 目录
        new webpack.IgnorePlugin(/\.\/locale/, /moment/),
    ]
}

6、使用 CDN 加速，图片也需要 cdn 配置

{
    mode: 'production',
    output: {
        publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },
}

7、使用 production 模式

• 自动开启代码压缩
• Vue React 等会自动删除调试代码（如开发环境的 warning）
• 自动启动 Tree-Shaking

{
    mode: 'production',
}

1）什么是 Tree-Shaking ？比如 math.js 有这样一段代码

export const sum = (a, b) => {
    return a + b
}
export const mult = (a, b) => {
    return a * b
}
// ES6 Module 才能让 tree-shaking 生效
// commonjs 就不行

在 index.js 中只引用 sum 函数

import { sum } from './math'

这样在打包是会自动删除 mult 函数，这就是 Tree-Shaking 功能

2）ES6 Module 和 Commonjs 的区别

• ES6 Module 静态引入，编译时引入
• Commonjs 动态引入，执行时引入
• 只有 ES6 Module 才能静态分享，实现 Tree-Shaking

let apiList = require('../config/api.js')
if(isDev){
    // 可以动态引入，执行时引入
    apiList = require('../config/api_dev.js')
}
import apiList from '../config/api.js'
if(isDev){
    // 编辑时报错，只能静态引入
    import apiList from '../config/api_dev.js'
}

8、使用 Scope Hosting

• 代码体积更小
• 创建函数作用域更少
• 代码可读性更好

比如

let a = 1;
let b = 2;
let c = 3;
let d = a+b+c;   //在webpack中会自动省略一些可以简化的代码
//简化后的代码如下：console.log(6);
console.log(d);

配置启用 Scope Hosting 功能

const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin')
module.exports = smart(webpackCommonConf, {
    resolve:{
        // 针对 NPM 中第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
        mainFields:['jsnext:main','browser','main']
    },
    plugins: [
        // 开启 Scope Hosting
        new ModuleConcatenationPlugin(),
    ],