VUE 打包 项目优化总结

## VUE的项目，在上线之前是要进行优化的。简单总结一下

代码规范问题

一般我们写项目为了更好的交流，还有多人开发项目的时候，团队都会进行一定的代码规范。我们这里就用到了eslint。

设置默认的vscode的语法规范 npm run lint 命令检查并修改代码。剩下的需要手动修改。 创建.eslintignore 文件, 写入src/assets 这样就不会检查 这个目录下的文件。

移除代码中的console

我们写代码的时候都会使用console命令，来查看数据。这些数据会占用一定的空间，让服务器运行的慢。

安装一个插件：npm install babel-plugin-transform-remove-console --save-dev

配置插件：

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
 
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [...prodPlugins]

开发环境和部署环境

复制main.js里面的代码。 分别创建 prod_env.js 和 dev_env.js 将main.js
里面的代码复制到两个js文件中。

**配置打包的入口文件： 创建vue.config.js

在vue.config.js中写入如下代码：**

module.exports={
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            config.entry('app').clear().add('./src/prod_env.js')
        })
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/dev_env.js')
        })
    }

开发时：npm run serve
部署时：npm run build

CDN节点

将CDN节点方式引用的包，都注释掉。以防删掉之后。还原代码出错。

然后在pubilc/index.html里面引用

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>

继续在vue.config.js里面编写代码，来配置：

config.set( ' externals' ,{
vue: 'Vue' ,
axios:' axios' ,
lodash: ''
moment:' moment' ,
' vue-quill-editor': ' vueQuillEditor'
})

运行npm run build 命令 会发现代码变小了。

路由懒加载

安装插件：npm install --save-dev @babel/plugin-syntax-dynamic-import

修改好配置i文件。
然后修改路由引用：

import Vue from 'vue'
import VueRouter from 'vue-router'
const Login = () => import(/* webpackChunkName: "group-login" */ '../components/Login.vue')
 
const Home = () => import(/* webpackChunkName: "group-common" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "group-common" */ '../components/Welcome.vue')
 
const Users = () => import(/* webpackChunkName: "group-rights" */ '../components/user/Users.vue')

重新编译即可。