关于项目优化

最新推荐文章于 2024-03-07 08:30:22 发布

雨打荷叶

最新推荐文章于 2024-03-07 08:30:22 发布

阅读量272

点赞数

分类专栏： js vue-cli 文章标签： vue

本文链接：https://blog.csdn.net/qq_43358160/article/details/105845968

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue-cli

2 篇文章 0 订阅

订阅专栏

1、在项目上线后我们用在测试得console输出就不应该再显示了

解决办法：

打开每一个文件，手动删除，但是这种方法有两个弊端：
第一、费时费力
第二、其实我们在开发的时候还是需要用到的，只是在打包后，生成的文件中不包含而已
那么我们就需要下面两种方法了：

第一种：babel-plugin-transform-remove-console
这种方法呢是使用Babel的一个插件，因为webpack打包时会使用babel对代码进行降级，所以babel插件可以在打包的过程中，将console移除
第一步：使用命令行安装插件
```
npm install babel-plugin-transform-remove-console --save-dev
```
第二步：对插件进行配置
在项目根目录中的babel.config.js文件中加入
```
plugins:['transform-remove-console']
```
再次运行npm run build 就会发现console都删除了
第二种：terser-webpack-plugin
第一步：用命令行安装插件
```
npm install terser-webpack-plugin --save-dev
```
第二步：在项目根目录下新建webpack.config.js文件，将下面代码复制进去
```
const TerserPlugin=require('terser-webpack-plugin')
module.exports={
 optimization:{
  minimize:true,
  minimizer:[new TerserPlugin()],
  terserOptions:{
   compress:{
    drop_console:true
   }
  }
 }
}
```
重新打包即可
但是我们在使用第一种方法的时候，会出现一个问题：
就是安装好之后，不管利用
```
npm run build
```
还是
```
npm run serve
```
都会删除console语句
因为我们开发阶段都是使用npm run serve命令启动的，所以导致开发阶段我们所有的console输出语句都会消失，那么怎么办呢，当然我们也有解决办法，就是明确的告诉此插件当前是开发环境还是生产环境
修改babel.config.js中的代码

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

2、项目接口之生产环境和开发环境

前端开发的同学在写项目的时候都会遇到一个问题，那就是自己在开发阶段的时候，接口可能是自己使用node.js搭建的服务器，API返回的也都是假数据，等后台接口开发好之后，才能切换成后台提供的接口，等测试没有问题，服务端上线之后，还得改成正式的接口，这样改来改去非常的麻烦，还容易出错
当然我们也有解决方案：
就是创建两个入口文件，一个用于开发环境打包，一个用于生产环境打包，
具体来说就是：

第一步：创建两个入口文件
在src目录下新建prod_env.js和dev_env.js
将原先的入口文件的代码拷贝到这两个文件中，并删除原先的入口文件
第二步：配置打包时的入口文件
项目根目录下新建vue.config.js
编写如下代码：

module.exports = {
  chainWebpack: config => {
    //生产时,使用npm run build 命令,NODE_ENV的值就是production,所以会将prod_env.js作为入口文件
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/prod_env.js')
    })
    //开发时,使用npm run serve 命令,NODE_ENV的值就是development,所以会将dev.env.js作为入口文件
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/dev_env.js')
    })
  }
}

问题：
如果遇到下面问题
在这里插入图片描述
解决方案：
在跟项目文件同级的地方创建一个专门用于前端的一个文件，
在里面创建一个app.js用于运行
把下面代码拷贝到app.js中

const express = require('express')const app = express()app.use(express.static('./dist'))app.listen(8080, () => {    console.log('Server is running at http://127.0.0.1:8080')})

然后用命令行运行：npn run serve（从专业的角度上讲应该使用pm2 start .\app.js）
就可以正常访问了

3、打包的时候减小包的体积

默认情况下，凡是通过import引入的包，打包的时候都会被打包，这就会导致最后的包的体积比较大，伴随而来的就是程序的加载速度过慢
所以应该解决：

使用CDN解决
将线上环境中需要用到的一些依赖，比如：vue、vueRouter、axios等，使用cdn节点的方式引入，而不是在包里使用import方式引用，当然我们开发时候依赖的一些包，最好还是使用本地包，而不是cdn
凡是能通过CDN节点方式引用的包，在入口文件中都删除
然后在public/index.html中引用cdn节点

可以从这里寻找需要的cdn节点
然后在vue.config.js中加入设置
在这里插入图片描述

重新运行打包命令就会发现包的体积小了很多

路由懒加载
思路：打包时根据路由将对应的组件分割成不同的代码块，访问对应的路由时再加载对应的代码块，这样我们的访问就高效了
注意：
切分之后，并不是浏览器的访问某个路由才去下载对应的模块，仍然在首次访问程序时，下载所有模块，只不过每个模块分的很小，在家首页时需要的模块能够更快的下载下来，所以能够更快的显示
第一步：安装插件
使用方法参考官网：https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/

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

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

```

第二步：修改配置文件
在babel的配置文件中加入插件配置
在这里插入图片描述
第三步：修改路由引用
修改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-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')