Webpack 性能优化

本文目录结构

问题

Webpack 性能优化

答案

这部分的内容中，我们会聚焦于以下两个知识点，并且每⼀个知识点都属于⾼频考点：

• 有哪些⽅式可以减少 Webpack 的打包时间
• 有哪些⽅式可以让 Webpack 打出来的包更⼩

1 减少 Webpack 打包时间

1. 优化 Loader

对于 Loader 来说，影响打包效率⾸当其冲必属 Babel 了。因为 Babel 会将代码转为字符串⽣成 AST ，然后对 AST 继续进⾏转变最后再⽣成新的 代码，项⽬越⼤，转换代码越多，效率就越低。当然了，我们是有办法优化的

⾸先我们可以优化 Loader 的⽂件搜索范围

module.exports = {
    module: {
        rules: [
            {
                // js ⽂件才使⽤ babel
                test: /\.js$/,
                loader: 'babel-loader',
                // 只在 src ⽂件夹下查找
                include: [resolve('src')],
                // 不会去查找的路径
                exclude: /node_modules/
            }
        ]
    }
}

对于 Babel 来说，我们肯定是希望只作⽤在 JS 代码上的，然后 node_modules 中使⽤的代码都是编译过的，所以我们也完全没有必要再去 处理⼀遍

当然这样做还不够，我们还可以将 Babel 编译过的⽂件缓存起来，下次只需要编译更改 过的代码⽂件即可，这样可以⼤幅度加快打包时间

loader: 'babel-loader?cacheDirectory=true'

2. HappyPack

受限于 Node 是单线程运⾏的，所以 Webpack 在打包的过程中也是单线程 的，特别是在执⾏ Loader 的时候，⻓时间编译的任务很多，这样就会导致 等待的情况。

HappyPack 可以将 Loader 的同步执⾏转换为并⾏的，这样就能充分利⽤ 系统资源来加快打包效率了

module: {
    loaders: [
        {
            test: /\.js$/,
            include: [resolve('src')],
            exclude: /node_modules/,
            // id 后⾯的内容对应下⾯
            loader: 'happypack/loader?id=happybabel'
        }
    ]
    },
    plugins: [
        new HappyPack({
            id: 'happybabel',
            loaders: ['babel-loader?cacheDirectory'],
            // 开启 4 个线程
            threads: 4
        })
    ]

3. DllPlugin

DllPlugin 可以将特定的类库提前打包然后引⼊。这种⽅式可以极⼤的减少 打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公 共代码抽离成单独⽂件的优化⽅案。

接下来我们就来学习如何使⽤ DllPlugin

// 单独配置在⼀个⽂件中
// webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry: {
        // 想统⼀打包的类库
        vendor: ['react']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].dll.js',
        library: '[name]-[hash]'
    },
    plugins: [
        new webpack.DllPlugin({
        // name 必须和 output.library ⼀致
        name: '[name]-[hash]',
        // 该属性需要与 DllReferencePlugin 中⼀致
        context: __dirname,
        path: path.join(__dirname, 'dist', '[name]-manifest.json')
        })
    ]
}

然后我们需要执⾏这个配置⽂件⽣成依赖⽂件，接下来我们需要使⽤ DllReferencePlugin 将依赖⽂件引⼊项⽬中

// webpack.conf.js
module.exports = {
    // ...省略其他配置
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            // manifest 就是之前打包出来的 json ⽂件
            manifest: require('./dist/vendor-manifest.json'),
        })
    ]
}

4. 代码压缩

在 Webpack3 中，我们⼀般使⽤ UglifyJS 来压缩代码，但是这个是单线 程运⾏的，为了加快效率，我们可以使⽤ webpack-parallel-uglify- plugin 来并⾏运⾏ UglifyJS ，从⽽提⾼效率。

在 Webpack4 中，我们就不需要以上这些操作了，只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化 ⽅案，当然我们不⽌可以压缩 JS 代码，还可以压缩 HTML 、 CSS 代码， 并且在压缩 JS 代码的过程中，我们还可以通过配置实现⽐如删除 console.log 这类代码的功能。

5. ⼀些⼩的优化点

我们还可以通过⼀些⼩的优化点来加快打包速度

resolve.extensions ：⽤来表明⽂件后缀列表，默认查找顺序是 ['.js','.json'] ，如果你的导⼊⽂件没有添加后缀就会按照这个顺序查找⽂件。我们应该尽可能减少后缀列表⻓度，然后将出现频率⾼的后缀排在前⾯

resolve.alias ：可以通过别名的⽅式来映射⼀个路径，能让 Webpack 更快找到路径

module.noParse ：如果你确定⼀个⽂件下没有其他依赖，就可以使⽤该属性让Webpack 不扫描该⽂件，这种⽅式对于⼤型的类库很有帮助

2 减少 Webpack 打包后的⽂件体积

1. 按需加载

想必⼤家在开发 SPA 项⽬的时候，项⽬中都会存在⼗⼏甚⾄更多的路由⻚ ⾯。如果我们将这些⻚⾯全部打包进⼀个 JS ⽂件的话，虽然将多个请求合并 了，但是同样也加载了很多并不需要的代码，耗费了更⻓的时间。那么为了⾸ ⻚能更快地呈现给⽤户，我们肯定是希望⾸⻚能加载的⽂件体积越⼩越好，这 时候我们就可以使⽤按需加载，将每个路由⻚⾯单独打包为⼀个⽂件。当然不 仅仅路由可以按需加载，对于 loadash 这种⼤型类库同样可以使⽤这个功 能。

按需加载的代码实现这⾥就不详细展开了，因为鉴于⽤的框架不同，实现起来 都是不⼀样的。当然了，虽然他们的⽤法可能不同，但是底层的机制都是⼀样 的。都是当使⽤的时候再去下载对应⽂件，返回⼀个 Promise ，当 Promise 成功以后去执⾏回调。

2. Scope Hoisting

Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模 块合并到⼀个函数中去。

⽐如我们希望打包两个⽂件

// test.js
export const a = 1
// index.js
import { a } from './test.js'

对于这种情况，我们打包出来的代码会类似这样

[
    /* 0 */
    function (module, exports, require) {
        //...
    },
    /* 1 */
    function (module, exports, require) {
        //...
    }
]

但是如果我们使⽤ Scope Hoisting 的话，代码就会尽可能的合并到⼀个函 数中去，也就变成了这样的类似代码

[
    /* 0 */
    function (module, exports, require) {
    //...
}

这样的打包⽅式⽣成的代码明显⽐之前的少多了。如果在 Webpack4 中你希 望开启这个功能，只需要启⽤ optimization.concatenateModules 就可以 了。

module.exports = {
    optimization: {
        concatenateModules: true
    }

3. Tree Shaking

Tree Shaking 可以实现删除项⽬中未被引⽤的代码，⽐如

// test.js
export const a = 1
export const b = 2
// index.js
import { a } from './test.js'

对于以上情况， test ⽂件中的变量 b 如果没有在项⽬中使⽤到的话，就不会被打包到 ⽂件中。

如果你使⽤ Webpack 4 的话，开启⽣产环境就会⾃动启动这个优化功能。

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

面试题
HTML	CSS	JavaScript
jQuery	Vue.js	React
算法	HTTP	Babel
BootStrap	Electron	Gulp
Node.js	前端经验相关	前端综合
Webpack	微信小程序	-

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！