Vue优化策略_项目发布_01
文章目錄
- 一、移除console 策略
- 1. 命令
- 1.1. 插件官網：
- 1.2. 安裝babel-plugin-transform-remove-console
- 1.3. 在babel.config.js或者.babelrc文件中配置
- 2. 圖形化(推薦使用)
- 2.1. 在線圖形化安裝插件
- 2.2. 在babel.config.js或者.babelrc文件中配置
- 二、生成打包報告
- 1. 通過命令參數的形式生成報告
- 1.1. 插件安裝
- 1.2. 分析生成的report.html
- 2. 可視化UI面板直接查看報告(推薦使用)
- 2.1. 啟動ui界面
- 2.2. ui界面總覽
- 三、打包配置個性化
- 1. webpack配置項簡述
- 2. 為開發環境和發布環境指定不同打包入口
- 2.1. 開發環境入口文件src/main-dev.js
- 2.2. 開發環境入口文件src/main-prod.js
- 2.3. 自定義webpack打包配置
- 2.4. 通過chainwebpack自定義打包入口
- 四、資源加載優化
- 1. 具體參考配置
- 2. 指定CDN引用
- 3. 通過CDN優化ElementUI的打包
- 3.1. 操作流程
- 五、首頁內容定制
- 1. 插件配置1
- 2. 插件配置2
- 六、路由異步+懶加載
- 1. 命令安裝
- 2. 圖形化安裝(推薦使用)
- 3. 配置插件
- 4. 組件引入方式修改
- 5. 把組件按組分塊
一、移除console 策略
在企業內部：
在dev開發環境中需要有console，為了方便開發人員測試。
在發布環境中，卻不能出現console調用的方法。
1. 命令
1.1. 插件官網：
https://www.npmjs.com/package/babel-plugin-transform-remove-console
1.2. 安裝babel-plugin-transform-remove-console
npm install babel-plugin-transform-remove-console --save-dev1.3. 在babel.config.js或者.babelrc文件中配置
配置參數：
{"plugins": ["transform-remove-console"] }企業內部完整配置(推薦使用)：
由于這個文件屬于全局的配置文件，因此，這里對打包環境做了判斷，此配置只在發布或者上線環境中啟動
官網截圖：
2. 圖形化(推薦使用)
2.1. 在線圖形化安裝插件
【依賴】-【添加依賴】-【開發依賴】搜索【babel-plugin-transform-remove-console】-【安裝】
2.2. 在babel.config.js或者.babelrc文件中配置
企業內部完整配置(推薦使用)：
由于這個文件屬于全局的配置文件，因此，這里對打包環境做了判斷，此配置只在發布或者上線環境中啟動
二、生成打包報告
打包時，為了直觀的發現項目中存在的問題，可以在打包時生成報告，通過報告分析項目中存在的問題。
1. 通過命令參數的形式生成報告
1.1. 插件安裝
#通過vue-cli的命令選項可以生成打包報告 #--report選項可以生成report.html 以此來幫助分析打包內容 vue-cli-service build --report1.2. 分析生成的report.html
2. 可視化UI面板直接查看報告(推薦使用)
在可視化的UI面板中，通過控制臺和分析面板，可以方便的清晰直觀多角度看到項目中存在的問題。
2.1. 啟動ui界面
vue ui2.2. ui界面總覽
三、打包配置個性化
1. webpack配置項簡述
通過vue-cli 3.0 工具生成的項目，默認隱藏了所有的webpack的配置項，目的是為了屏蔽項目的配置過程，讓程序員吧工作的重心，放到具體功能和業務邏輯的實現上。
若有需要修改webpack默認配置需求，可以再項目目錄中，按需創建vue.config.js這個配置文件，從而對項目的打包發布過程中作者自定義的配置(具體配置參考：https://cli.vuejs.org/zh/config/#vue_config.js)
// vue.config.js //在這個配置文件中，自定義配置選項的對象 module.exports = { //選項 }2. 為開發環境和發布環境指定不同打包入口
默認情況下，Vue項目的開發模式與發布模式，公用一個打包的入口文件(即src/main.js)，為了將項目的開發過程分離，我們可以分為2種模式，為開發環境和發布環境指定不同的入口文件。
2.1. 開發環境入口文件src/main-dev.js
2.2. 開發環境入口文件src/main-prod.js
2.3. 自定義webpack打包配置
在vue.config.js導出的配置對象中，新增configureWebpack或chainWebpack節點，來自定義webpack的打包配置。
configure和chainWebpack的作用相同，唯一的區別就是他們修改了webpack配置的方式：
①chainWebpack通過鏈式編程的形式，來修改默認的webpack配置
②configureWebpack通過操作對象的形式來修改默認webpack配置
二者具體差異：https://cli.vuejs.org/zh/guide/webpack.html#
2.4. 通過chainwebpack自定義打包入口
module.exports = {chainWebpack: config => {// 發布模式config.when(process.env.NODE_ENV === 'production', config => {config.entry('app').clear().add('./src/main-prod.js')})// 開發模式config.when(process.env.NODE_ENV === 'development', config => {config.entry('app').clear().add('./src/main-dev.js')})} }四、資源加載優化
通過externals加載外部的CDN資源
1. 具體參考配置
config.set('externals', {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios',lodash: '_',echarts: 'echarts',nprogress: 'NProgress','vue-quill-editor': 'VueQuillEditor'})2. 指定CDN引用
同事需要在public/index.html的文件頭部，添加CDN資源引用
<!-- nprogress 進度條的樣式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /><!-- 富文本編輯器 的樣式表文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.css" /><link rel="stylesheet" href="https://cdn.bootcss.com/quill/1.3.7/quill.snow.min.css" /><link rel="stylesheet" href="https://cdn.bootcss.com/quill/1.3.7/quill.bubble.min.css" /><script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script><script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script><script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script><script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script><script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script><!-- 富文本編輯器的 js 文件 --><script src="https://cdn.bootcss.com/quill/1.3.7/quill.core.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>3. 通過CDN優化ElementUI的打包
雖然在開發階段，我們啟用了element ui組件的按需加載，盡可能的減少打包的體積，但是那些被按需加載的組件，還是占用了較大的文件體積。此時，我們可以將element-ui中的組件，也通過CDN的形式來加載，這樣可以進一步減少打包后的文件體積。
3.1. 操作流程
具體操作如下：
①在main-prod.js中，注釋掉eleemnt-ui按需加載的代碼
②在index.html的頭部區域中，通過CDN來加載element-ui的js和css樣式
五、首頁內容定制
不同的打包環境下，首頁內容可能會有所不同，我們可以通過插件的方式進行定制。
1. 插件配置1
module.exports = {chainWebpack: config => {// 發布模式config.when(process.env.NODE_ENV === 'production', config => {config.entry('app').clear().add('./src/main-prod.js')// 配置插件config.plugin('html').tap(args => {args[0].isProd = truereturn args})})// 開發模式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 = falsereturn args})})} }2. 插件配置2
在public/index.html的首頁中，可以根據isProd的值，來決定如何渲染頁面結構
<!-- 按需渲染的頁面標題 --><title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商后臺管理系統</title><!-- 按需加載外部的CDN資源 --><% if(htmlWebpackPlugin.options.isProd){ %><!-- 通過external 加載外部的CDN資源 --><% } %>六、路由異步+懶加載
當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。
結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載。
1. 命令安裝
npm install --save-dev @babel/plugin-syntax-dynamic-import2. 圖形化安裝(推薦使用)
安裝開發依賴：
任選其一種即可
3. 配置插件
插件官網：
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/
在babel.config.js文件中添加：
4. 組件引入方式修改
const Foo = () => import('./Foo.vue')const router = new VueRouter({routes: [{ path: '/foo', component: Foo }] })5. 把組件按組分塊
官網案例：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')展示項目：
接下一篇：Vue優化策略_項目上線_02
https://gblfy.blog.csdn.net/article/details/105369051
總結
以上是生活随笔為你收集整理的Vue优化策略_项目发布_01的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java.lang.NoClassDef
- 下一篇： 【基于注解方式】Spring整合Kafk