webpack5优化学习（二）——如何编译提速

akatukijohi

已于 2022-03-30 15:35:29 修改

阅读量1.4k

点赞数 1

分类专栏： webpack相关文章标签： webpack 前端

于 2022-03-27 23:48:02 首次发布

本文链接：https://blog.csdn.net/akatukijohi/article/details/123781707

版权

webpack相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、编译提速

1.缩小查找范围

1）resolve属性的配置

a. extensions
require和import的时候可以省略扩展名，然后查找文件时的先后顺序会根据extensions的配置进行
比如：

resolve: {
    extensions: ['.js', '.jsx', '.json'],//指定文件的扩展名,找不到会报错
}

b. alias
配置别名
比如，当你想直接用【import “bootstrap”】或者【require(“bootstrap”)】引入bootstrap的css时，webpack.config.js可以这么配置：

const path = require('path');
const bootstrap = path.resolve(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.css');
resolve: {
    alias: { bootstrap },//指定查找别名
}

c. modules
设置去哪儿里找依赖包
比如：

resolve: {
    modules: ["c:/node_modules", 'node_modules'],// 指定查找目录
}

d. mainFields
找到依赖包后，会自动以package.json的main字段做入口文件，如果你不希望是main字段，也可以自定义

resolve: {
    mainFields: ['browser', 'module', 'main'],//从package.json中的哪个字段查找入口文件
}

e. mainFiles
当找不到mainFields时，会默认查找的文件入口

resolve: {
    mainFiles: ['index']//如果找不到mainFields的话，会找索引文件，index.js
}

2）oneOf

每个文件都会把rules循环遍历一遍，如果使用oneOf，那么匹配到第一个的时候就会中止，不再往下查找
写法就是把规则包在数组里，外面写个oneOf
webpack.config.js

module: {
    rules: [
      {
        oneOf: [
        	{
            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
          },
          {
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader',
              'less-loader'
            ]
          }
        ]
      }
    ]
  }

3）externals

如果我们想引一个库，又不想让webpack打包，又不想影响CMD、AMD、window global等方式的使用，就可以配置externals
比如，你想引入jquery，可以这么写：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

index.js

const $ = require('jquery');
console.log($)

webpack.config.js

externals: {
    jquery: 'jQuery'
 }

配置完后，你写require(‘jquery’)的时候，实际上等于window.jQuery

4）resolveLoader

此配置只对loader有效，里面可配置的属性和resolve差不多。比如你自定义了一个loader，所以并没有在node_modules里，这时候rules里写你自定义的loader，编译的时候就会找不到，为了解决这个问题就需要用resolveLoader。
举个例子，比如你在根目录建了一个loader文件夹专门放loader

const path = require('path');
const loadersPath = path.resolve(__dirname, 'loaders');

resolveLoader: {//只对loader有用
    modules: [loadersPath, 'node_modules']
}

这样配置就会优先去loader文件夹里找loader啦！

2.noParse

属于module下面的一个属性。
可以配置用于哪些模块不需要解析依赖项，也就是说你配置的文件里不能出现require、import。
比如：

noParse: /lodash/ //表示碰到lodash不用解析里面的依赖

3.ignorePlugin

帮助你忽略某个特定模块，比如moment这个格式化时间的库非常大，主要因为它里面有大量的国际化文件，我们可以选择忽略它

const webpack = require('webpack');

plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/, //资源正则
      contextRegExp: /moment$/ //目录正则
    })
  ]

想要中文语言包，可以单独引

import 'moment/locale/zh-cn';

4.thread-loader及include、exclude

thread-loader，多进程，帮你开多个线程池一起编译。注意：小项目没必要用，因为开线程、线程通信都要花时间。
写在rules里：

{
    test: /\.js$/,
    include: path.resolve(__dirname, 'src'),//只转换src下面的文件
    exclude: /node_modules/,//不解析node_modules
    use: [
        //thread-loader开启线程池，开线程和线程通信都需要时间
        {
            loader: 'thread-loader', options: { workers: 3 }
        }
        , 'babel-loader']
}

5.利用缓存

缓存默认路径：node_modules/.cache

1）babel-loader自带的缓存功能

{
    test: /\.js$/,
    use: [
         {
            loader: 'babel-loader',
            options: {
                cacheDirectory: true //启动babel缓存，编译过的模块不会再重新编译，提高打包速度
            }
        }]
}

2）cache-loader

上面babel-loader的cacheDirectory是缓存js，想缓存css可以用cache-loader，当然cache-loader也可以缓存js，只是直接用babel自带的更方便一点

{
    test: /\.css$/,
    use: [
    	'cache-loader',
        'style-loader',
        'css-loader'
    ]
}

3）hard-source-webpack-plugin

缓存文件依赖，配置后第二次构建会比首次减少80%的时间。webpack5内置了这个功能，不需要配了。

akatukijohi

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
webpack5优化学习（二）——如何编译提速

编译提速缩小查找范围extensionsrequire和import的时候可以省略扩展名，然后查找文件时的先后顺序会根据extensions的配置进行比如：resolve: { extensions: ['.js', '.jsx', '.json'],//指定文件的扩展名,找不到会报错}alias配置别名比如，当你想直接用【import “bootstrap”】或者【require(“bootstrap”)】引入bootstrap的css时，webpack.config.j
复制链接

扫一扫