刪除生產(chǎn)環(huán)境下的console.log
npm install babel-plugin-transform-remove-console --save-dev
babel.config.js
// 生產(chǎn)環(huán)境下的插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [...prodPlugins]
}
通過if條件判斷，只有在production階段插件才會生效
生成打包報告
通過命令行方式
// --report 選項可以生成 report.html
vue-cli-service build --report
通過可視化UI面板
運行vue ui->任務(wù)->build完成->分析
配置不同打包入口
默認(rèn)情況下，Vue項目的開發(fā)模式和發(fā)布模式共用同一個打包入口文件，即為src/main.js戏自。為了將項目的開發(fā)過程和發(fā)布過程分離，可以指定兩種打包入口
開發(fā)模式為src/main-dev.js
發(fā)布模式為src/main-prod.js
兩中修改webpack配置的方式configureWebpack和chainWebpack，兩者功能相同，只是使用方式不同豌注，
-
chainWebpack通過鏈?zhǔn)骄幊?/code>形式來修改webpack配置 -
configWebpack通過操作對象的形式來修改webpack配置
vue.config.js
module.exports = {
chainWebpack: config => {
// 發(fā)布模式
config.when(process.env.NODE_ENV === 'production', config => {
// .entry('app') 獲取默認(rèn)入口，.clear()清除默認(rèn)入口灯萍，.add()添加新入口
config
.entry('app')
.clear()
.add('./src/main-prod.js')
})
// 開發(fā)模式
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
})
}
}
通過externals加載外部資源
默認(rèn)情況下轧铁，import導(dǎo)入的第三方依賴會被打包進(jìn)同一個文件，造成文件體積過大進(jìn)而影響加載速度旦棉。通過配置 externals 結(jié)點將需要全局導(dǎo)入的第三方依賴排除在打包文件外齿风，可以有效減少打包體積
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
聲明方式為依賴包名: 注冊名稱。其中注冊名稱必須和引入CDN資源之后的掛載在window上的對象名字一致绑洛，可以使用console.log(window)打印這個對象的名稱救斑。如果注冊名稱所指定的對象在window上找不到，將導(dǎo)致白屏真屯。此外脸候，如果引入的CDN資源在window上的掛載的對象名類似xx-xx-xx(不符合js對象命名規(guī)范)，這種資源不能通過CDN導(dǎo)入绑蔫，只能用Import方式纪他。
vue.config.js
module.exports = {
chainWebpack: config => {
// externals 結(jié)點的作用是將某些包排除在打包文件之外，在真正使用時從window全局獲取晾匠。前面是包的名字茶袒，后面是從 window 中查找該對象時的別名
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'Nprogress',
'vue-quill-editor': 'VueQuillEditor',
vuex: 'Vuex'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
// 開發(fā)模式
config.when(process.env.NODE_ENV === 'development', config => {
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
}
}
config.plugin('html')使用html插件向模板中傳遞參數(shù)
css
<!-- css -->
<% if(htmlWebpackPlugin.options.isProd){ %>
<link rel="stylesheet" />
<link rel="stylesheet" />
<link rel="stylesheet" />
<link rel="stylesheet" />
<link rel="stylesheet" />
<% } %>
js
<!-- js -->
<% if(htmlWebpackPlugin.options.isProd){ %>
<script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.min.js"></script>
<% } %>
如果isProd為true，CDN資源才會被導(dǎo)入
路由懶加載
只有在訪問到該路由時對應(yīng)的資源文件才會被加載凉馆，建議不要將每個路由單獨打包薪寓，而是通過webpackChunkName為多個路由指定同一個打包文件，這樣可以減少請求的次數(shù)
router/index.js
const routes = [
{
path: '/home',
name: 'Home',
component: () => import(/* webpackChunkName: 'Login-Home-Dashboard' */ '@/components/Home'),
redirect: '/dashboard',
children: [
{
path: '/dashboard',
name: 'Dashboard',
component: () => import(/* webpackChunkName: 'Login-Home-Dashboard' */ '@/components/Dashboard')
},
]
}
]
完整配置
vue.config.js
module.exports = {
chainWebpack: config => {
// 發(fā)布模式
config.when(process.env.NODE_ENV === 'production', config => {
// .entry('app') 獲取默認(rèn)入口澜共，.clear()清除默認(rèn)入口向叉，.add()添加新入口
config
.entry('app')
.clear()
.add('./src/main-prod.js')
// externals 結(jié)點的作用是將某些包排除在打包文件之外，在真正使用時從window全局獲取嗦董。前面是包的名字母谎，后面是從 window 中查找該對象時的別名
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'Nprogress',
'vue-quill-editor': 'VueQuillEditor',
vuex: 'Vuex'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
// 開發(fā)模式
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
}
}
main-prod.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/scss/style.scss'
// import './plugins/element.js'
import axios from 'axios'
import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'
// 富文本樣式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
import VueQuillEditor from 'vue-quill-editor'
// 導(dǎo)入表格樹
import TreeTable from 'vue-table-with-tree-grid'
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
axios.interceptors.request.use(config => {
NProgress.start()
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
axios.interceptors.response.use(config => {
NProgress.done()
return config
})
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(VueQuillEditor)
// 全局注冊表格樹
Vue.component('tree-table', TreeTable)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
引入CDN后，將導(dǎo)入樣式的語句注釋或者刪除京革，只保留導(dǎo)入JS的語句奇唤。
