一、build:prod概述
build:prod是指在項目開發完成之後，將代碼打包成最終可以上線的版本。一般而言，通過build:prod進行打包會減小代碼大小、提高性能、優化體驗以及保障安全等方面的目標。
在Vue項目中，我們可以通過執行npm run build:prod來進行打包，最終的打包文件會生成在/dist目錄下。下面我們將從代碼優化、性能提升、體驗優化、安全保障等方面對build:prod進行詳細闡述。
二、代碼的優化
在代碼的優化方面，主要從三個方面入手：文件壓縮、代碼分割和 Tree Shaking 。
1、文件壓縮
// bable.config.js
module.exports = {
...
// 壓縮JS代碼
presets: [
['@babel/preset-env', {
useBuiltIns: false,
corejs: false,
modules: false,
targets: {
browsers: [
'> 1%',
'last 2 versions',
'not ie <= 8',
],
},
}],
],
// 壓縮CSS代碼
plugins: [
...
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
normalizeUnicode: false,
}],
},
canPrint: true,
}),
...
],
}以上的配置表明了在打包生產環境的文件時，需要對JS和CSS代碼進行壓縮。其中使用了@babel/preset-env和cssnano等第三方庫進行壓縮，同時可以選擇移除注釋、一些特殊字元等內容，從而減小文件大小。
2、代碼分割
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
...
// 使用webpack的splitChunks進行代碼分割
optimization: {
splitChunks: {
chunks: 'all',
name: 'vendor',
},
},
plugins: [
...
// 使用HtmlWebpackPlugin注入產生的vendor.js
new HtmlWebpackPlugin({
...
chunks: ['vendor', 'main'],
...
}),
...
],
...
};以上的配置表明了在打包生產環境的文件時，webpack會將代碼拆分成多個文件，這些文件會被單獨引入，從而減少頁面載入時間。
3、Tree Shaking
// webpack.config.js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
...
// 開啟Tree Shaking，需要使用uglifyjs壓縮JS代碼
optimization: {
minimize: true,
minimizer: [new UglifyJSPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: false,
uglifyOptions: {
// 開啟Tree Shaking
compress: {
unused: true,
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log'],
},
},
})],
},
...
};以上的配置表明了在打包生產環境的文件時，會進行Tree Shaking機制，去掉無用的代碼。開啟Tree Shaking需要使用uglifyjs插件。
三、性能的提升
在性能的提升方面，主要從兩個方面入手：打包速度和頁面載入速度。
1、打包速度
// vue.config.js
module.exports = {
...
// 開啟parallel配置來提高打包速度
configureWebpack: {
...
plugins: [],
performance: {
hints: false,
},
},
parallel: require('os').cpus().length > 1,
...
};以上的配置表明了在打包生產環境的文件時，開啟parallel配置可以提高打包速度。
2、頁面載入速度
// vue.config.js
module.exports = {
...
// 對靜態資源進行gzip壓縮
configureWebpack: {
...
},
pluginOptions: {
compression: {
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
},
},
...
};以上的配置表明了在打包生產環境的文件時，對靜態資源進行gzip壓縮以減小文件大小，從而提高頁面載入速度。
四、體驗的優化
在體驗的優化方面，主要從兩個方面入手：打包文件的結果進行分析以及Web Workers。
1、打包文件的結果進行分析
module.exports = {
...
// 分析打包文件的結果
plugins: [
...
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
...
],
...
};以上的配置表明了在打包生產環境的文件時，可以分析打包文件的結果，以便了解打包文件是否有冗餘代碼以及文件大小佔比等信息，從而進行相應的優化。
2、Web Workers
// 非同步處理用戶數據
if (window.Worker) {
const worker = new Worker('./user.worker.js');
worker.onmessage = (event) => {
console.log(event.data);
};
worker.postMessage({
type: 'getText',
message: 'bundle',
});
} else {
// fallback
}以上的代碼表明了使用Web Workers進行非同步處理，可以在頁面處理數據時提高響應速度，從而優化用戶體驗。
五、安全保障
在安全保障方面，主要從兩個方面入手：CSRF攻擊和XSS攻擊。
1、CSRF攻擊
// vue.config.js
module.exports = {
...
// 在webpack.config.js中使用CopyWebpackPlugin拷貝不經過處理的靜態資源代碼
// 在vue.config.js中使用compression-webpack-plugin壓縮靜態資源代碼
configureWebpack: {
...
plugins: [
...
new CopyWebpackPlugin([{
from: path.resolve(__dirname, 'src/assets'),
to: path.resolve(__dirname, 'dist/assets'),
ignore: ['.*'],
}]),
...
],
},
pluginOptions: {
compression: {
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
},
},
...
};以上的配置表明了在打包生產環境的文件時，可以使用CopyWebpackPlugin拷貝不經過處理的靜態資源代碼，並使用compression-webpack-plugin壓縮靜態資源代碼，從而避免被黑客在前端代碼中注入惡意代碼，防止CSRF攻擊。
2、XSS攻擊
// 引入DOMPurify庫進行HTML過濾
import DOMPurify from 'dompurify';
...
this.$refs.content.innerHTML = DOMPurify.sanitize(this.html);以上的代碼表明了在前端頁面渲染HTML代碼時，可以使用DOMPurify庫進行HTML過濾，從而防止被黑客在前端代碼中注入惡意代碼，防止XSS攻擊。
原創文章，作者：POIQ，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/134262.html
微信掃一掃 
支付寶掃一掃 