前端必会的Webpack优化技巧
发布网友
发布时间：3小时前
共1个回答
热心网友
时间：23分钟前
webpack优化是前端开发中不可或缺的一环。无论是面试还是实际开发，优化都是提升用户体验的关键。构建时间的优化是首要任务，可以通过使用thread-loader实现多进程打包，加快打包速度。在webpack.base.js中配置如下：
npm i thread-loader -D
{ test: /\.js$/, use: [ 'thread-loader', 'babel-loader' ], }
cache-loader则可以缓存资源，提高二次构建的速度，配置方式如下：
npm i cache-loader -D
{ test: /\.js$/, use: [ 'cache-loader', 'thread-loader', 'babel-loader' ], }
开启热更新，可以在修改代码时只刷新修改的部分，大大提高开发效率。配置如下：
在webpack.dev.js中添加：
const webpack = require('webpack');
plugins: [ new webpack.HotModuleReplacementPlugin() ],
devServer: {+ hot: true }
合理设置exclude和include属性，可以进一步提高构建速度。在webpack.base.js中配置：
{ test: /\.js$/, include: path.resolve(__dirname, '../src'), exclude: /node_modules/, use: [ 'babel-loader' ] }
构建区分环境，可以确保开发环境和生产环境的配置正确。开发环境去代码压缩、gzip等，生产环境则需要这些配置。
提升webpack版本可以优化打包效果，打包体积优化主要是减少项目整体体积，有利于页面加载速度。使用css-minimizer-webpack-plugin和terser-webpack-plugin可以压缩CSS和JS代码。
tree-shaking可以只打包用到的代码，webpack5默认开启tree-shaking。在webpack.base.js中配置：
module.exports = { mode: 'production' }
source-map可以定位错误代码的位置，不同环境设置不同的类型。开发环境设置为：
module.exports = { mode: 'development', devtool: 'eval-cheap-module-source-map' }
生产环境设置为：
module.exports = { mode: 'production', devtool: 'nosources-source-map' }
使用webpack-bundle-analyzer可以审查打包后的体积分布，配置如下：
const { BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
plugins: [ new BundleAnalyzerPlugin(), ]
模块懒加载可以将大js文件分成多个小js文件，按需加载，提高首屏加载速度。配置如下：
const routes = [ { path: '/login', name: 'login', component: login }, { path: '/home', name: 'home', component: () = import('../views/home/home.vue'), }, ]
开启Gzip可以大大提高用户的页面加载速度。配置如下：
const CompressionPlugin = require('compression-webpack-plugin')
plugins: [ new CompressionPlugin({ algorithm: 'gzip', threshold: 10240, minRatio: 0.8 }) ]
对于小图片，可以转base减少http请求次数。在webpack.base.js中配置：
{ test: /\.(png|jpe?g|gif|svg|webp)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 25 * 1024, } }, generator: { filename: 'images/[contenthash][ext][query]', }, }
合理配置hash可以保证浏览器访问时命中缓存，提高性能。在webpack.base.js中配置：
output: { path: path.resolve(__dirname, '../dist'), filename: 'js/chunk-[contenthash].js', clean: true, }
以上就是前端必会的Webpack优化技巧的详细内容。
