前端vue项目优化

## 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>

猜你喜欢