【Web前端基础】webpack如何优化_Web前端

6条回答

kitidog2016

2楼 · 2021-02-07 18:16

0、写在前面

Webpack优化可以分为优化开发体验和优化输出质量两部分

1、优化开发体验

优化开发体验的目的是为了提升开发时的效率，其中又可以分为以下几点：

优化构建速度。在项目庞大时构建耗时可能会变的很长，每次等待构建的耗时加起来也会是个大数目。

4-1-1 在配置 Loader 时通过 include 去缩小命中范围
4-1-2 优化 resolve.modules 配置，指明存放第三方模块的绝对路径，以减少寻找，配置如下：
4-1-3 优化 resolve.mainFields 配置
4-1-4 优化 resolve.alias 配置
4-1-5 优化 resolve.extensions 配置
在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能：
4-1-6 优化 module.noParse 配置

后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。
在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require('./data') 写成 require('./data.json')。

4-1 缩小文件搜索范围
4-2 使用 DllPlugin
为什么给 Web 项目构建接入 动态链接库 的思想后，会大大提升构建速度呢？原因在于包含大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。由于动态链接库中大多数包含的是常用的第三方模块，例如 react、react-dom，只要不升级这些模块的版本，动态链接库就不用重新编译。
4-3 使用 HappyPack
在整个 Webpack 构建流程中，最耗时的流程可能就是 Loader 对文件的转换操作了，因为要转换的文件数据巨多，而且这些转换操作都只能一个个挨着处理。（运行在 Node.js 之上的 Webpack 是单线程模型的）
HappyPack的核心原理就是把这部分任务分解到多个进程去并行处理，从而减少了总的构建时间。
4-4 使用 ParallelUglifyPlugin
ParallelUglifyPlugin 会开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成，每个子进程其实还是通过 UglifyJS去压缩代码，但是变成了并行执行。所以 ParallelUglifyPlugin 能更快的完成对多个文件的压缩工作。

优化使用体验。通过自动化手段完成一些重复的工作，让我们专注于解决问题本身。

4-5 使用自动刷新
使用 webpack 模块负责监听文件，webpack-dev-server 模块则负责刷新浏览器。
4-6 开启模块热替换

2、优化输出质量

优化输出质量的目的是为了给用户呈现体验更好的网页，例如减少首屏加载时间、提升性能流畅度等。这至关重要，因为在互联网行业竞争日益激烈的今天，这可能关系到你的产品的生死。

优化输出质量本质是优化构建输出的要发布到线上的代码，分为以下几点：

减少用户能感知到的加载时间，也就是首屏加载时间。

4-7 区分环境
4-8 压缩代码
4-9 CDN 加速
4-10 使用 Tree Shaking
Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码（没用到的代码）。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出。
4-11 提取公共代码
4-12 按需加载

提升流畅度，也就是提升代码性能。

4-13 使用 Prepack
4-14 开启 Scope Hoisting

作者：One_Hund
链接：https://www.jianshu.com/p/4f58b179c626
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

小王霸

3楼 · 2021-02-08 10:56

1，优化原理

（1）webpack 的 resolve.modules 是用来配置模块库（即 node_modules）所在的位置。当 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，它便会到 node_modules 目录下去找。

（2）在默认配置下，webpack 会采用向上递归搜索的方式去寻找。但通常项目目录里只有一个 node_modules，且是在项目根目录。为了减少搜索范围，我们可以直接写明 node_modules 的全路径。

2，操作步骤

（1）打开 build/webpack.base.conf.js 文件，添加如下配置：

module.exports = {

resolve: {

extensions: ['.js', '.vue', '.json'],

modules: [

resolve('src'),

resolve('node_modules')

],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

},

八九

4楼 · 2021-02-08 11:21

白屏可能是排线断了、如果关机后再开能解决问题那就是软件问题要分不同的情况 1.你的机子是在什么情况下才白屏的呢? A,开机后过几分钟. (那么要重新写软件了.到维修台或厂家修.) B,开机就白屏. (80%是排线坏了.一年以外的到维修台维修.) 2.你的机子白屏到什么程度? A,有时候白屏,有时候不白屏. (排线坏或软件问题两种可能.) B.开机后.把手机上翻盖晃一点,屏现,再晃回去又白屏了. (换排线.) C.自始至终都是白屏.(80%要换排线) D.开好机子后.不动它.一会儿就白屏了.(软件问题.重新写软件OK) 3.你的机子以前是否维修过? 是,则又要更换传送排线了. 否.(即没修过).那么机子从买来到现在用了多长时间了? 一年以内可能要返厂保修了.超过一年了,要么要升级.要么换排线. 白屏一般是由于短信的MCE问题、记忆体损坏、系统错误、MEDIA已关闭、安装或删除游戏后、运行游戏（CS、DOOM）等原因引起的。

雨陵西 - 每一代青年都有自己的际遇和机缘

5楼 · 2021-02-18 11:18

优化Loader配置

{    test: /\.js$/,
    use: [        'babel-loader?cacheDirectory',//开启转换结果缓存
    ],
    include: path.resolve(__dirname, 'src'),//只对src目录中文件采用babel-loader
    exclude: path.resolve(__dirname,' ./node_modules'),//排除node_modules目录下的文件
},

Loader处理文件的转换操作是很耗时的，所以需要让尽可能少的文件被Loader处理

优化resolve.modules配置

resolve: {        modules: [path.resolve(__dirname, 'node_modules')],
    }

resolve.modules用于配置webpack去哪些目录下寻找第三方模块，默认是['node_modules']，但是，它会先去当前目录的./node_modules查找，没有的话再去../node_modules最后到根目录；
所以当安装的第三方模块都放在项目根目录时，就没有必要安默认的一层一层的查找，直接指明存放的绝对位置

优化resolve.extensions配置

在导入没带文件后缀的路径时，webpack会自动带上后缀去尝试询问文件是否存在，而resolve.extensions用于配置尝试后缀列表；默认为extensions:['js','json'];
及当遇到require('./data')时webpack会先尝试寻找data.js，没有再去找data.json；如果列表越长，或者正确的后缀越往后，尝试的次数就会越多；
所以在配置时为提升构建优化需遵守：
因为项目中用的jsx较多，所以配置extensions: [".jsx",".js"],

频率出现高的文件后缀优先放在前面；
列表尽可能的小；
书写导入语句时，尽量写上后缀名

我的网名不再改

6楼 · 2021-02-24 15:14

1、优化开发体验

优化开发体验的目的是为了提升开发时的效率，其中又可以分为以下几点：

优化构建速度。在项目庞大时构建耗时可能会变的很长，每次等待构建的耗时加起来也会是个大数目。

4-1-1 在配置 Loader 时通过 include 去缩小命中范围
4-1-2 优化 resolve.modules 配置，指明存放第三方模块的绝对路径，以减少寻找，配置如下：
4-1-3 优化 resolve.mainFields 配置
4-1-4 优化 resolve.alias 配置
4-1-5 优化 resolve.extensions 配置
在配置 resolve.extensions 时你需要遵守以下几点，以做到尽可能的优化构建性能：
4-1-6 优化 module.noParse 配置

后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。
在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 require('./data') 写成 require('./data.json')。

4-1 缩小文件搜索范围
4-2 使用 DllPlugin
为什么给 Web 项目构建接入 动态链接库 的思想后，会大大提升构建速度呢？原因在于包含大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。由于动态链接库中大多数包含的是常用的第三方模块，例如 react、react-dom，只要不升级这些模块的版本，动态链接库就不用重新编译。
4-3 使用 HappyPack
在整个 Webpack 构建流程中，最耗时的流程可能就是 Loader 对文件的转换操作了，因为要转换的文件数据巨多，而且这些转换操作都只能一个个挨着处理。（运行在 Node.js 之上的 Webpack 是单线程模型的）
HappyPack的核心原理就是把这部分任务分解到多个进程去并行处理，从而减少了总的构建时间。
4-4 使用 ParallelUglifyPlugin
ParallelUglifyPlugin 会开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成，每个子进程其实还是通过 UglifyJS去压缩代码，但是变成了并行执行。所以 ParallelUglifyPlugin 能更快的完成对多个文件的压缩工作。

优化使用体验。通过自动化手段完成一些重复的工作，让我们专注于解决问题本身。

4-5 使用自动刷新
使用 webpack 模块负责监听文件，webpack-dev-server 模块则负责刷新浏览器。
4-6 开启模块热替换

2、优化输出质量

优化输出质量本质是优化构建输出的要发布到线上的代码，分为以下几点：

减少用户能感知到的加载时间，也就是首屏加载时间。

4-7 区分环境
4-8 压缩代码
4-9 CDN 加速
4-10 使用 Tree Shaking
Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码（没用到的代码）。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出。
4-11 提取公共代码
4-12 按需加载

提升流畅度，也就是提升代码性能。

4-13 使用 Prepack
4-14 开启 Scope Hoisting

征戰撩四汸

7楼 · 2022-01-04 16:49

1、优化Loader配置

Loader处理文件的转换操作是很耗时的，所以需要让尽可能少的文件被Loader处理

{

test: /\.js$/,

use: [

'babel-loader?cacheDirectory',//开启转换结果缓存

],

include: path.resolve(__dirname, 'src'),//只对src目录中文件采用babel-loader

exclude: path.resolve(__dirname,' ./node_modules'),//排除node_modules目录下的文件

},

2、优化resolve.modules配置

resolve.modules用于配置webpack去哪些目录下寻找第三方模块，默认是['node_modules']，但是，它会先去当前目录的./node_modules查找，没有的话再去../node_modules最后到根目录；

所以当安装的第三方模块都放在项目根目录时，就没有必要安默认的一层一层的查找，直接指明存放的绝对位置

1

2

3

resolve: {

modules: [path.resolve(__dirname, 'node_modules')],

}

3、优化resolve.extensions配置

在导入没带文件后缀的路径时，webpack会自动带上后缀去尝试询问文件是否存在，而resolve.extensions用于配置尝试后缀列表；默认为extensions:['js','json'];

及当遇到require('./data')时webpack会先尝试寻找data.js，没有再去找data.json；如果列表越长，或者正确的后缀越往后，尝试的次数就会越多；

所以在配置时为提升构建优化需遵守：

频率出现高的文件后缀优先放在前面；
列表尽可能的小；
书写导入语句时，尽量写上后缀名

因为项目中用的jsx较多，所以配置extensions: [".jsx",".js"],

基本配置后查看构建速度：Time: 10654ms;配置前为Time: 11593ms