建站
咨詢
售后
建站咨詢
新聞中心
在這篇文章中，我將從三個(gè)方面分享一些我常用的技巧：
成都創(chuàng)新互聯(lián)成立于2013年，我們提供高端網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、全網(wǎng)營銷推廣、微信小程序開發(fā)、微信公眾號(hào)開發(fā)、成都網(wǎng)站推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地，為塔吊租賃企業(yè)提供源源不斷的流量和訂單咨詢。
- 提高優(yōu)化速度
- 壓縮打包文件的大小
- 改善用戶體驗(yàn)。
提高速度
1、線程加載器
多線程可以提高程序的效率，我們也可以在 Webpack 中使用。而thread-loader是一個(gè)可以在Webpack中啟用多線程的加載器。
安裝：
npm i thread-loader -D
配置：
{
test: /\.js$/,
use: [
'thread-loader',
'babel-loader'
],
}2、緩存加載器
在我們的項(xiàng)目開發(fā)過程中，Webpack 需要多次構(gòu)建項(xiàng)目。為了加快后續(xù)構(gòu)建，我們可以使用緩存，與緩存相關(guān)的加載器是緩存加載器。
安裝：
npm i cache-loader -D
配置：
{
test: /\.js$/,
use: [
'cache-loader',
'thread-loader',
'babel-loader'
],
}3、Hot update
當(dāng)我們在項(xiàng)目中修改一個(gè)文件時(shí)，Webpack 默認(rèn)會(huì)重新構(gòu)建整個(gè)項(xiàng)目，但這并不是必須的。我們只需要重新編譯這個(gè)文件，效率更高，這種策略稱為Hot update。
Webpack 內(nèi)置了Hot update插件，我們只需要在配置中開啟Hot update即可。
配置：
// import webpack
const webpack = require('webpack');
然后：
{
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
hot: true
}
}4、exclude & include
在我們的項(xiàng)目中，一些文件和文件夾永遠(yuǎn)不需要參與構(gòu)建。所以我們可以在配置文件中指定這些文件，防止Webpack取回它們，從而提高編譯效率。
當(dāng)然，我們也可以指定一些文件需要編譯。
exclude : 不需要編譯的文件
include : 需要編譯的文件
配置：
{
test: /\.js$/,
include: path.resolve(__dirname, '../src'),
exclude: /node_modules/,
use: [
'babel-loader'
]
}減小打包文件的大小
5、縮小 CSS 代碼
css-minimizer-webpack-plugin 可以壓縮和去重 CSS 代碼。
安裝：
npm i css-minimizer-webpack-plugin -D
配置：
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')和
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
}6、縮小 JavaScript 代碼
terser-webpack-plugin 可以壓縮和去重 JavaScript 代碼。
安裝：
npm i terser-webpack-plugin -D
配置：
const TerserPlugin = require('terser-webpack-plugin')
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // remove console statement
},
},
}),
],
}7、tree-shaking
tree-shaking 就是：只編譯實(shí)際用到的代碼，不編譯項(xiàng)目中沒有用到的代碼。
在 Webpack5 中，默認(rèn)情況下會(huì)啟用 tree-shaking。我們只需要確保在最終編譯時(shí)使用生產(chǎn)模式。
module.exports = {
mode: 'production'
}8、source-map
當(dāng)我們的代碼出現(xiàn)bug時(shí)，source-map可以幫助我們快速定位到源代碼的位置。但是這個(gè)文件很大。
為了平衡性能和準(zhǔn)確性，我們應(yīng)該：在開發(fā)模式下生成更準(zhǔn)確（但更大）的 source-map；在生產(chǎn)模式下生成更?。ǖ荒敲礈?zhǔn)確）的源映射。
開發(fā)模式：
module.exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map'
}生產(chǎn)方式：
module.exports = {
mode: 'production',
devtool: 'nosources-source-map'
}9、Bundle Analyzer
我們可以使用 webpack-bundle-analyzer 來查看打包后的 bundle 文件的體積，然后進(jìn)行相應(yīng)的體積優(yōu)化。
安裝：
npm i webpack-bundle-analyzer -D
配置：
const {
BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')
// config
plugins: [
new BundleAnalyzerPlugin(),
]改善用戶體驗(yàn)
10、模塊延遲加載
如果模塊沒有延遲加載，整個(gè)項(xiàng)目的代碼會(huì)被打包成一個(gè)js文件，導(dǎo)致單個(gè)js文件體積非常大。那么當(dāng)用戶請求網(wǎng)頁時(shí)，首屏的加載時(shí)間會(huì)更長。
使用模塊懶加載后，大js文件會(huì)被分割成多個(gè)小js文件，加載時(shí)網(wǎng)頁按需加載，大大提高了首屏的加載速度。
要啟用延遲加載，我們只需要編寫如下代碼：
// src/router/index.js
const routes = [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
// lazy-load
component: () => import('../views/home/home.vue'),
},
]
11、壓縮包
Gzip是一種常用的文件壓縮算法，可以提高傳輸效率。但是，此功能需要后端配合。
安裝：
npm i compression-webpack-plugin -D
配置：
const CompressionPlugin = require('compression-webpack-plugin')
// config
plugins: [
// gzip
new CompressionPlugin({
algorithm: 'gzip',
threshold: 10240,
minRatio: 0.8
})
]12、base64
對(duì)于一些小圖片，可以轉(zhuǎn)成base64編碼，這樣可以減少用戶的HTTP請求次數(shù)，提升用戶體驗(yàn)。url-loader 在 webpack5 中已被棄用，我們可以使用 assets-module 代替。
配置：
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
parser: {
// Conditions for converting to base64
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
}
},
generator: {
filename: 'images/[contenthash][ext][query]',
},
},13、正確配置哈希
我們可以將哈希添加到捆綁文件中，這樣可以更輕松地處理緩存。
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/chunk-[contenthash].js',
clean: true,
},以上就是我跟你分享的13個(gè)關(guān)于Webpack的技巧，希望對(duì)你有用。
結(jié)論
最后，我們可以通過以下這張思維導(dǎo)圖來總結(jié)。
新聞標(biāo)題：13個(gè)你應(yīng)該知道的Webpack優(yōu)化技巧
網(wǎng)址分享：http://www.dlmjj.cn/article/cdpehjc.html
