vue项目打包优化

移除console语句

1. 上线之后不再需要console语句，使用build命令打包时，需要将console语句进行删除，**使用命令下载babel的一个插件，

npm install babel-plugin-transform-remove-console --save-dev

2. 然后在项目的根目录下的babel.config.js文件中配置

module.exports = {
     
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [...prodPlugins]
}

3. 虽然这种方法执行命令就会移除掉，但是在开发阶段运行npm run serve命令时也会移除，所以就应该判断一下是开发环境还是生产环境，修改一下babel.config.js的配置

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
     
  prodPlugins.push('transform-remove-console')
}

开发环境和部署环境

项目开发阶段和生成环境可能不一样，开发阶段配置也会比较随意 ，等到上线之后再进行手动修改既繁琐又麻烦还很容易出错。
解决方法：使用两个入口文件，一个 用于开发环境，另一个用于生产环境

1. 创建入口文件

在 src 目录下新建 prod_env.js 和 dev_env.js
将main.js 中代码分别拷贝到这两个文件中，并删除 main.js

2. 配置打包时的入口文件

项目根目录下新建 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')
        })
    }
}

• NODE_ENV的值如果值为development，就说明当前是开发阶段，会将dev.env.js 作为入口文件

• NODE_ENV的值如果值为production，就说明当前是开发阶段，会将prod_evn.js 作为入口文件

减少打包时的体积

通过import引入的包，在打包的时候也会一块进行打包，造成体积过大，程序加载会慢的结果
解决办法：
使用CDN或者路由懒加载
CDN就是把一些依赖使用CDN节点的方式引入
1.修改生成环境（prod_env.js）入口文件

• 可以通过CDN节点方式引用的安装包，在文件都可以中删除
• 在 public目录下的index.html中引入删除安装包的CDN节点

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.core.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.bubble.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.min.js"></script>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>

2. 在 vue.config.js 中添加配置

执行npm run build打包
使用CDN方式，打包的时候就不用打包安装包，体积会减少
但是在开发阶段我们不需要使用CDN节点，而是继续用本地下载的安装包
3. 在vue.config.js中修改配置

4.修改uoload目录下的index.html文件

配置完之后执行开发打包命令

npm run serve

查看网络会发现请求的资源会少很多

路由懒加载

1. 安装插件
使用方法参考官网 https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/

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

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

2. 修改配置文件 babel.config.js

@babel/plugin-syntax-dynamic-import

3. 修改router目录下的index.js

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-user" */ '../components/user/Users.vue')

const Rights = () => import(/* webpackChunkName: "group-rights" */ '../components/rights/Rights.vue')
const Roles = () => import(/* webpackChunkName: "group-rights" */ '../components/rights/Roles.vue')
 
const Categories = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Categories.vue')
const Params = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Params.vue')
 
const GoodsList = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsList.vue')
const AddGoods = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/AddGoods.vue')
 
const Orders = () => import('../components/order/Orders.vue')

不同路由对应的组件分割成不同的 代码块，然后当路由被访问的时候才加载对应组件，这样加载的资源变多了，但是每个模块变小了