Webpack优化点

程序员小淞
102 阅读2分钟

提升用户体验，是我们前端工程师的职责！

1、构建时间优化

thread-loader

多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader，由于启动项目和打包项目都需要加速，所以配置在webpack.base.js中

npm i thread-loader -D

//webpack.base.js
{
                //匹配js后缀文件
                test: /\.js$/,
                //排除node_modules中的js
                exclude: /node_modules/,
                use: [
                    'thread-loader',
                    'babel-loader'
                ]
            },

cache-loader

缓存资源，提高二次构建的速度，使用方法是将cache-loader放在比较费时间的loader之前，比如babel-loader，由于启动项目和打包项目都需要加速，所以配置在webpack.base.js中

npm i cache-loader -D

//webpack.base.js
{
                //匹配js后缀文件
                test: /\.js$/,
                //排除node_modules中的js
                exclude: /node_modules/,
                use: [
                    'cache-loader',
                    'thread-loader',
                    'babel-loader'
                ]
            },

持久化缓存

在 webpack4 里面，可以使用 cache-loader 将编译结果写入硬盘缓存，还可以使用 babel-loader,设置 option.cacheDirectory 将 babel-loader 编译的结果写进磁盘。

webpack5缓存策略 默认开启缓存，缓存默认是在内存里。可以对 cache 进行设置。 缓存淘汰策略：文件缓存存储在 node_ modules/.cache/webpack，最大 500 MB, 缓存时长两个星期，旧的缓存先淘汰

image.png

开启热更新

比如修改了项目中的某一个文件，会导致整个项目刷新，这非常耗时间，如果只刷新修改的这个模块，其他保持原状，那将大大提高修改代码的重新构建时间（热更新只用于开发中，所以配置在webpack.dev.js）

// 开发环境

module.exports = merge(base, {
    mode: 'development',
    devServer: {
    //需要在devserver中配置
        hot: true,
    },
    devtool: 'eval-cheap-module-source-map',
    plugins: [
    //刚才的代码
        new webpack.HotModuleReplacementPlugin()
    ]
})

exclude & include

  • exclude : 不需要处理的文件
  • include : 需要处理的文件

合理设置这两个属性，可以大大提高构建速度（在webpack.base.js中配置）

//webpack.base.js
{
                //匹配js后缀文件
                test: /\.js$/,
                include:path.resolve(__dirname,'../src'),
                //排除node_modules中的js
                exclude: /node_modules/,
                use: [
                    'cache-loader',
                    'thread-loader',
                    'babel-loader'
                ]
            }

构建区分环境

区分环境去构建是非常重要的，我们要明确知道，开发环境时我们需要哪些配置，不需要哪些配置；而最终打包生产环境时又需要哪些配置，不需要哪些配置：

  • 开发环境 : 去除代码压缩、gzip、体积分析等优化的配置，大大提高构建速度
  • 生产环境 : 需要代码压缩、gzip、体积分析等优化的配置，大大降低最终项目打包体积

提升webpack版本

webpack版本越新，打包效果肯定更好

2、打包体积优化

主要是打包后项目整体体积的优化，有利于项目上线后的页面加载速度提升

css代码压缩

css代码压缩使用 css-minimizer-webpack-plugin ,效果包括压缩、去重（代码的压缩比较耗时间，所以只用在打包项目时，所以需要在webpack.prod.js中配置）

npm i css-minimizer-webpack-plugin -D

// 生产环境
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = merge(base, {
//刚才的代码
    optimization:{
        minimizer:[
            new CssMinimizerPlugin(),//去重压缩css
        ]
    }
})

JS代码压缩 JS代码压缩使用terser-webpack-plugin,实现打包后JS代码的压缩（代码的压缩比较耗时间，所以只用在打包项目时，只需要在webpack.prod.js中配置）

npm i terser-webpack-plugin -D

// 生产环境
const TerserPlugin = require('terser-webpack-plugin')

module.exports = merge(base, {
  //刚才的代码...
    optimization:{
        minimizer:[
         //刚才的代码...
            new TerserPlugin({//压缩js代码
                terserOptions:{
                    compress:{
                        drop_console:true //去除console
                    }
                }
            })
        ]
    }
})

tree-shaking

tree-shaking简单说作用就是：只打包用到的代码，没用到的代码不打包，而webpack默认开启tree-shaking，当打包的mode为production时，自动开启tree-shaking进行优化

// 生产环境

const base = require('./webpack.base')

module.exports = merge(base, {
    mode: 'production',
})

source-map类型

source-map的作用是：方便报错的时候能定位到错误代码的位置，它的体积不容小觑，所以对于不同环境设置不同的类型是很有必要的。

  • 开发环境

开发环境的时候我们需要能精准定位错误代码的位置

// 开发环境

module.exports = merge(base, {
    mode: 'development',
    devtool: 'eval-cheap-module-source-map',
})
  • 生产环境

生产环境，我们想开启source-map,但是又不想体积太大，那么可以换一种类型

// 生产环境
module.exports = merge(base, {
    mode: 'production',
    devtool: 'nosources-source-map',
})

打包体积分析

使用webpack-bundle-analyzer 可以审查打包后的体积分布，进而进行相应的体积优化（只需要打包时看体积，所以只需要在webpack.prod.js中配置）

npm i webpack-bundle-analyzer -D

// 生产环境
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
module.exports = merge(base, {
    plugins: [
        new BundleAnalyzerPlugin(),
    ]
})
3、用户体验优化

模块懒加载

如果不进行模块懒加载的话，最后整个项目代码都会呗打包到一个js文件中，单个js文件体积非常大，那么当用户网页请求的时候，首屏加载时间会比较长，使用模块懒加载之后，大的js文件会分成多个小js文件，网页加载时会按需加载，大大提升首屏加载速度

image.png

Gzip

开启Gzip后，大大提高用户的页面加载速度，因为gzip的体积比原文件小很多，当然需要后端的配合，使用compression-webpack-plugin（只需要在打包时优化体积，所以只需要在webpack.prod.js中配置）

npm i compression-webpack-plugin -D

// 生产环境

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = merge(base, {
    plugins: [
      
        new CompressionPlugin({
            algorithm:'gzip',
            threshold:10240,
            minRatio:0.8
        })
    ]
})

小图片转base64

对于一些小图片，可以转base64，这样可以减少用户的http网络请求次数，提高用户的体验。webpack5中url-loader已被废弃，改用asset-module（在webpack.base.js中配置）

  {
                //匹配文件后缀的规则
                test: /\.(png|jpe?g|gif|svg|webp)$/,
                type: 'asset',
                parser: {
                    // 转base64的条件
                    dataUrlCondition: {
                        maxSize: 25 * 1024, // 25kb
                    }
                },
                generator: {
                    // 打包到 dist/image 文件下
                    filename: 'images/[contenthash][ext][query]',
                },
            },

合理配置hash

我们要保证，改过的文件需要更新hash值，而没改过的文件依然保持原本的hash值，这样才能保证在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的（在webpack.base.js中配置）

 // 输出
    output: {
        // 输出到 dist文件夹
        path: path.resolve(__dirname, './dist'),
        // js文件下 给文件加上contenthash
        filename: 'js/chunk-[contenthash].js',
        // 每次打包前自动清除旧的dist
        clean: true,
    },
avatar
文章
阅读
粉丝