1.啟用壓縮樱衷，讓頁面加載更快
在我們開發(fā)的時候，為了方便調(diào)試店溢，我們需要使用源碼進(jìn)行調(diào)試叁熔，但在生產(chǎn)環(huán)境，我們追求的更多的是加載更快床牧，體驗(yàn)更好荣回，這時候我們會將代碼中的空格注釋去掉，對待嗎進(jìn)行混淆壓縮戈咳，只為了讓js,css文件變得更小心软，加載更快革砸。但只是這樣做是不夠的，我們還可以做得更極致糯累。
gzip是Web世界中使用的最為廣泛的文件壓縮算法，當(dāng)前我們使用的大多數(shù)服務(wù)端(比如nginx)和客戶端(比如chrome)都已經(jīng)支持了這個算法册踩，所以如果我們在打包Vue項目的時候泳姐，可以直接將所有的靜態(tài)資源壓縮為gzip,就可以極大的減少靜態(tài)資源的大小，提升瀏覽器加載速度暂吉，那Vue項目如何配置呢胖秒？
1.1.添加vue.config.js 文件
在新建Vue項目中，默認(rèn)是沒有vue.config.js文件的慕的，首先你需要在項目根目錄新建一個vue.config.js文件阎肝，然后在文件中加入以下代碼
module.exports = {
}
本文后面會多次使用到vue.config.js文件，在后面將不再贅述肮街。
1.2.配置compression-webpack-plugin
安裝 compression-webpack-plugin
yarn add compression-webpack-plugin -D
配置
修改vue.config.js文件為以下代碼
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
configureWebpack: config => {
if (isProd) {
// 配置webpack 壓縮
config.plugins.push(
new CompressionWebpackPlugin({
test: /\.js$|\.html$|\.css$/,
// 超過4kb壓縮
threshold: 4096
})
)
}
}
}
查看壓縮效果
在配置上面的壓縮之后风题，執(zhí)行yarn build命令，會發(fā)現(xiàn)生成的靜態(tài)文件里面新增了后綴為gz的文件
如果此時將項目部署到已開啟了gzip的服務(wù)器如nginx里面之后嫉父，訪問瀏覽器即可看到瀏覽器下載的是已壓縮的文件
1.3.讓moment變得更小
使用過moment的同學(xué)一定知道沛硅，moment的locale語言包特別大，但是我們一般的項目只在國內(nèi)用绕辖，也用不到那么多語言摇肌，是不是可以去掉呢？這時候你需要使用到webpack.IgnorePlugin仪际。
在vue.config.js文件围小，你需要添加以下代碼
const webpack = require('webpack')
module.exports = {
chainWebpack: config => {
// 優(yōu)化moment 去掉國際化內(nèi)容
config
.plugin('ignore')
// 忽略/moment/locale下的所有文件
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
}
}
我們雖然按照上面的方法忽略了包含’./locale/'該字段路徑的文件目錄,但是也使得我們使用的時候不能顯示中文語言了，這時候如果想用某一種語言應(yīng)該怎么辦呢?
import moment from 'moment'
//手動引入所需要的語言包
import 'moment/locale/zh-cn';
// 指定使用的語言
moment.locale('zh-cn');
當(dāng)然更建議在項目中使用更輕量級的day.js代替moment
2.生產(chǎn)環(huán)境刪除console.log
開發(fā)環(huán)境為了調(diào)試树碱，會添加大量的console.log肯适，但如果console.log提交到生產(chǎn)環(huán)境里面，不僅僅會影響到代碼執(zhí)行性能赴恨，而且可能會泄露一些核心數(shù)據(jù)疹娶，所以我們更希望的是在生產(chǎn)環(huán)境，將所有的console.log清除掉伦连，怎么做呢雨饺？
安裝插件
需要安裝babel-plugin-transform-remove-console插件
yarn add babel-plugin-transform-remove-console -D
配置babel.config.js
打開babel.config.js文件，然后在文件內(nèi)添加
// 所有生產(chǎn)環(huán)境
const prodPlugin = []
if (process.env.NODE_ENV === 'production') {
// 如果是生產(chǎn)環(huán)境惑淳，則自動清理掉打印的日志额港，但保留error 與 warn
prodPlugin.push([
'transform-remove-console',
{
exclude: ['error', 'warn']
}
])
}
module.exports = {
plugins: [
...prodPlugin
]
}
3.開啟eslint,stylelint
看到這一條，有些同學(xué)就有點(diǎn)受不了想退出了歧焦，配置這個不是自己給自己找不自在嗎移斩？在團(tuán)隊開發(fā)中肚医，配置這些還是很有用的，制約團(tuán)隊中的每個人都按照標(biāo)準(zhǔn)來開發(fā)功能向瓷，這樣至少大家寫的代碼不至于相互看不懂（我深受不規(guī)范代碼的折磨俺μ住）。
https://github.com/snowzijun/vue-vant-base
3.1.安裝依賴
在配置這些lint之前猖任，你需要安裝這些插件
@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-babel
eslint-plugin-prettier
eslint-plugin-vue
husky
lint-staged
prettier
stylelint
stylelint-config-recess-order
stylelint-config-standard
stylelint-prettier
stylelint-scss
同時還需要給vscode以下插件
eslint
stylelint
Prettier - Code formatter
3.2.配置vscode
在vscode的setting文件里面添加以下代碼
"eslint.enable":true,
"eslint.options": {
"extensions":[
".js",
".vue",
".ts",
".tsx"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"css.validate": true,
"scss.validate": true,
"less.validate": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
3.3.配置eslint
首先在項目根目錄下面添加 .eslintrc.js與.eslintignore文件
在.eslintrc.js文件內(nèi)添加以下內(nèi)容
// 縮略版
module.exports = {
root: true,
globals: {
process: true
},
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
plugins: ['babel', 'prettier'],
rules:{
// 校驗(yàn)規(guī)則此處略
}
}
在.eslintignore文件中添加以下代碼
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
配置完之后你稚，在package.json的script里面添加
"eslint": "vue-cli-service lint"
然后執(zhí)行yarn eslint就可以對代碼進(jìn)行格式化，當(dāng)然vscode也會在你保存文件的時候校驗(yàn)一次
3.4.配置stylelint
限制js與vue是不夠的朱躺，還需要限制以下style,感覺這是自己給自己無限挖坑的舉措刁赖，但是這東西越用越爽，一起來看看
首先在項目根目錄下面新建.stylelintrc.js與.stylelintignore文件
在.stylelintrc.js文件中添加以下內(nèi)容
module.exports = {
extends: ["stylelint-config-standard","stylelint-config-recess-order"],
"plugins": [
"stylelint-scss"
],
rules: {
// 校驗(yàn)規(guī)則略
}
}
.stylelintignore文件內(nèi)容與.eslintignore文件內(nèi)容一致
配置完之后长搀，在package.json的script里面添加
"stylelint": "stylelint src/**/*.{html,vue,css,sass,scss} --fix",
然后執(zhí)行yarn stylelint就可以對樣式進(jìn)行格式化宇弛，當(dāng)然vscode也會在你保存文件的時候校驗(yàn)一次
3.5.配置husky
上面配置完之后，寫代碼時候vscode會自動校驗(yàn)格式化代碼源请， 但就怕有人用其他編輯器沒有配置插件枪芒，將未校驗(yàn)的代碼提交到倉庫里面，導(dǎo)致所有人的代碼都爆紅巢钓，這時候就需要使用husky在提交代碼時候進(jìn)行校驗(yàn)病苗。
在git提交代碼時候，會觸發(fā)一系列hook鉤子函數(shù)症汹，而husky就是一個Git hooks工具硫朦。lint-staged是一個在git暫存文件上運(yùn)行l(wèi)inters的工具,為什么要用這個工具呢，因?yàn)槲覀冊谔峤淮a的時候背镇，只需要對已經(jīng)修改過的文件進(jìn)行校驗(yàn)咬展，不然檢查所有文件，比較浪費(fèi)時間瞒斩。那我們改怎么配置呢破婆？
你只需要在package.json文件里面添加以下代碼
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add -A"
],
"*.{html,vue,css,sass,scss}": [
"yarn stylelint"
]
}
這時候你如果執(zhí)行g(shù)it commit -m '提交描述'的時候，會發(fā)現(xiàn)提交之前會調(diào)用eslint與stylelint進(jìn)行代碼校驗(yàn)胸囱，校驗(yàn)失敗無法提交
