## vue项目优化
1. 添加进度提示之 nprogress 插件
```js
使用步骤
1. 全局安装插件,在vue的可视化工具中查找插件并且安装到运行依赖
2. 在使用路由拦截器的js文件中,分别导入对应的css和包文件
3. 配置请求拦截器和响应拦截器
axios.interceptors.request.use(function(data) { Nprogress.start() return data } ) axios.interceptors.response.use(function(data) { Nprogress.start() return data } )
2. 去除打印的console.log语句
用到插件 babel-plugin-transform-remove-console
1. 使用可视化工具, 安装插件到生产环境
2. 在babel-config.js 中, 在导出文件中添加 plugins字段,参数为包名字
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: ['transform-remove-console'] }
3. 判断在不同环境下,根据需要移除console语句
在babel.config.js 和 vue.config.js 中, 使用 process.env.NODE_ENV 可以获取到打包处于什么环境
4. 生成打包报告
通过黑窗口
vue-cli-service build --report
通过vue可视化面板,直接运行build,就能看到项目的数据,体积之类的,从而进行优化
5.
在vue.config.js中自定义打包入口
在vue项目中新建配置文件 vue.config.js , 该文件需要导出一个对象
module.exports = { chainWebpack: config => { // 生产阶段 config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js') // 打包过程中忽略的文件,后面的import 后面的名字,前面是包的名字 // 例如 import aa from '包名字' config.set('externals', { vue: 'Vue', lodash: '_', 'vue-quill-editor': 'VueQuillEditor', echarts: 'echarts', 'vue-router': 'VueRouter', axios: 'axios', nprogress: 'NProgress', elementui: 'elementUI' }) // 在html根页面挂载一个名为 isProd 的布尔值 // 在html中通过模板语法就能直接访问 <%= htmlWebpackPlugin.options.isProd %> // 用途是 可以根据布尔值判断是否处于开发环境, 处于开发环境就不使用cdn加速服务 config.plugin('html').tap(args => { args[0].isProd = false return args }) }) // 开发阶段 // true 为开发阶段 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 = true return args }) }) } }
配置不同的打包入口是因为
1. 项目同时引用本地的包和在线的包, 会报错 (我的项目是这样的)
2. 如果是开发阶段, 使用在线的cdn加速包, 会受网络影响,
3. 部分使用cdn的 css 文件 , 两个入口相当于 开发环境的是备份 , 是源文件 , 然后在生产环境中进行 , css 样式的注释 , 引用在线就不需要本地, 配置不会忽略css
6. 路由懒加载
需要用到的包为
@babel/plugin-syntax-dynamic-import
需要在babel.config.js中声明使用该包
const arr = [] if (process.env.NODE_ENV === 'production') { arr.push('transform-remove-console') } module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [...arr, '@babel/plugin-syntax-dynamic-import'] }
然后在路由文件中,把原来的引入语句改造成如下格式
// 注释的为分组的名字, 安装的包认识这种语法 // 只需要改 Foo, 引入的vue组件名字 group-foo 分组名字 和后面的路径 // 具有相同名字的组件会打包进同一个文件, 从而提高页面的相应速度 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') // 完整示例 // import Login from '../components/Login.vue' // import Home from '../components/Home.vue' // import Welcome from '../components/Welcome.vue' const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue') const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue') const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
最后附上 一个富文本编辑器的 插件 的cdn加速地址 vue-quill-editor
<!-- 富文本编辑器 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" /> <!-- 富文本编辑器的 js 文件 --> <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>