vue 项目打包上线移除console
使用build命令打包的时,会有一些警告的错误,原因是在上线之后不需要console语句,所以在上线的时候需要把这个console语句移除
比较好的解决方法:
使用命令下载babel的一个插件,安装命令:
npm install babel-plugin-transform-remove-console --save-dev
然后需要在项目的根目录下的的babel.config.js文件中配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [...prodPlugins]
}
执行打包命令后,console就会移除了
但是执行npm run serve后console也会被移除,解决方法就是判断开发环境还是生产环境,修改一下配置,在babel.config.js文件中加入代码
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
开发环境和部署环境
项目开发阶段和生成环境可能不一样,开发阶段主要是程序员使用的,配置也会比较随意 ,解决方法:使用两个入口文件,一个 用于开发环境,另一个用于生产环境
创建入口文件
在src目录下创建两个文件 prod_env.js 和 dev_env.js
把main.js入口文件中的代码分别拷贝到这两个文件,然后把main.js文件删除
配置打包时的入口文件
在项目根目录创建vue.config.js,编写代码
通过NODE_ENV的值如果值为development,就说明当前是开发阶段,会将dev.env.js 作为入口文件
通过NODE_ENV的值如果值为production,就说明当前是开发阶段,会将prod_evn.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')
})
}
}
减小包的体积
通过import方式引入的安装包,在执行打包命令的话也会被打包,回照成体积过大,程序加载起来就会比较慢
解决方法: 使用CDN 或者路由的懒加载
CDN方法就是把线上中的一些依赖,使用CDN节点的方式引用
修改生成环境(prod_env.js)入口文件
可以通过CDN节点方式引用的安装包,在文件都可以中删除
在 public目录下的index.html中引入删除安装包的CDN节点
<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>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-china-area-data@4.1.2/dist/app.min.js"></script>
在vue.config.js添加配置
要在生产环境中添加
执行npm run build
打包
使用CDN方式,打包的时候就不用打包安装包,体积会减少
但是在开发阶段我们不需要使用CDN节点,而是继续用本地下载的安装包
在vue.config.js中修改配置
修改uoload目录下的index.html文件
配置完之后执行开发打包命令
npm run serve
查看网络会发现请求的资源会少很多
路由懒加载
前面移除了console语句,使用CDN节点处理,但是部署时打包还是过大
vue官网上的解决方法:结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
npm install --save-dev @babel/plugin-syntax-dynamic-import
修改配置文件 babel.config.js
修改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')
把不同路由对应的组件分割成不同的 代码块,然后当路由被访问的时候才加载对应组件,这样就会更高效