vue项目优化简单总结

首先，vue项目在打包后，包的体积比较大，可能导致程序的加载比较慢，那要怎么解决这个问题呢？
解决方法主要有：

1. 移除项目中的console语句
2. 使用路由的懒加载
3. 使用cdn

1.移除console

可以使用 terser-webpack-plugin 插件，在npm中搜索这个插件，按照说明操作即可，安装命令如下

npm install terser-webpack-plugin --save-dev

配置：在项目根目录下的 babel.config 文件中加入如下代码

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
}

再次运行 npm run build 就不会报警告错误了

2.路由懒加载

首先需要安装 babel 的一个插件：babel/plugin-syntax-dynamic-import

npm install --save-dev @babel/plugin-syntax-dynamic-import

修改配置文件

module . exports = {
	presets:[
		' @vue/cli-plugin- babel/ preset'
	plugins: [
		... prodplugins,
		"@babel/plugin-syntax- dynamic - import"
	]
}

修改路由引用文件 router/index.js

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')
const Rights = () => import(/* webpackChunkName: "group-rights" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "group-rights" */ '../components/power/Roles.vue')
 
const Category = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Category.vue')
const Params = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Params.vue')
 
const GoodsList = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsList.vue')
const GoodsAdd = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsAdd.vue')
 
const Order = () => import('../components/order/Order.vue')
const Report = () => import('../components/reports/Report.vue')

配置好后，重新打包，虽然请求的资源变多了，但是每个请求的资源都比较小

3.cdn

使用cdn节点，可以有效减少包的体积。
首先将main.js中用 import 引入的包删除或注释掉
然后在 public/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://unpkg.com/vue-router/dist/vue-router.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'
})

重新运行打包命令后，发现包的体积相比于之前减少了很多。需要注意的是，第一次打包可能会出现错误，这种情况下再次运行打包命令即可。