从0到1搭建元素后台框架优化篇(打包优化)

　　介绍

这篇文章主要介绍从0到1搭建元素后台框架优化篇(打包优化),文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>开发环境与生产环境

开发环境与生产环境的配置也是开发中的必不可少的一环。本项目是由vue-cli3开发,vue-cli3深度集成了webpack,如果不熟悉vue-cli3可以先去官网看看相关配置。

<强>开发环境

在项目根目录下新建.env.development文件表明是开发环境。

,VUE_APP_CURRENTMODE =癲evelopment",//当前的环境 　　,VUE_APP_LOGOUT_URL=癶ttp://localhost: 3000/?//开发环境的地址

<强>生产环境

在项目根目录下新建.env。生产文件表明是生产环境。

,VUE_APP_CURRENTMODE =癲evelopment",//当前的环境 　　,VUE_APP_LOGOUT_URL=皒xx"//生产环境的地址

当然你也可以自己创建一个测试环境.env.test,同样可以像上边一样配置。

<强>环境运用

那么接下来我们怎么用它呢?这里不得不说一下的是包。json里面的两个命令服务,构建,其实对应的是全命令是vue-cli-service服务模式发展,vue-cli-service构建模式生产,如果你想要在构建命令中使用开发环境变量,那么可以加入

“dev-build":,“vue-cli-service  build ——mode  development"

接下来在vue.config。js运用它。

, config.plugin(& # 39;定义# 39;). tap (args =祝辞,{ 　　,,arg游戏[0][& # 39;process.env& # 39;] .VUE_APP_LOGOUT_URL =, JSON.stringify (process.env.VUE_APP_LOGOUT_URL) 　　,,console.log (args [0]) 　　,,return 参数; 　　以前,});

这里有必要说下,这段代码是写在chainWebpack配置项下面。这段代码其实运用了两个webpack插件webpack-chain允许配置链式操作,以及webpack。DefinePlugin .

<李>

webpack-chain:尝试通过提供可链式或顺流式的API创建和修改webpack配置。了解更多

<李>

webpack.DefinePlugin:它的作用是定义全局常量,是常量。即在模块用它定义的全局常量,那么你就不能改变它。也就是说我定义了一个process.env。VUE_APP_LOGOUT_URL常量,在src文件夹下面都可以使用了。解更多

<>强分包(代码分割)

首先思考,我们引入的第三方包与我们的业务代码一起打包会产生什么问题?

顾名思义,我们的业务代码变动比较频繁,而我们引入的第三方包基本上不会变动。浏览器会有缓存,没有变动的文件会直接从缓存中读取,这也间接的优化了网站的访问速速。

接下来配置vue.config。js,

<>强分割第三方库

,//代码分割 　　,config.optimization.minimize(真正的); 　　,config.optimization.splitChunks ({ 　　块才能:& # 39;所有# 39; 　　cacheGroup才能:{//才能vue2-editor单独打一个包 　　,,,vueEdior: { 　　,,,的名字:& # 39;vueEdior& # 39; 　　,,,测试://\ \]node_modules [\ \/] vue2-editor \ \//, 　　,,,优先级:10,//,优先级要大于,vendors 不然会被打包进,供应商 　　,,}, 　　,,//其余的第三方包打进供应商 　　,,,供应商:{ 　　,,,测试://\ \]node_modules \ \//, 　　,,优先级:-10 　　,,} 　　,,} 　　之前,})

<强>分割共用文件

组件是vue项目的重要组成部分。相当一部分组件都可以公用,在不同的文件中引入,因此我们可以将这部分公用的组件直接分割出来。

, config.optimization.minimize(真正的); 　　,config.optimization.splitChunks ({ 　　块才能:& # 39;所有# 39; 　　cacheGroup才能:{ 　　,,,vueEdior: { 　　,,,的名字:& # 39;vueEdior& # 39; 　　,,,测试://\ \]node_modules [\ \/] vue2-editor \ \//, 　　,,,优先级:10,//,优先级要大于,vendors 不然会被打包进,供应商 　　,,}, 　　,,,公众:{ 　　,,,的名字:& # 39;公共# 39; 　　,,,测试:解决(& # 39;src/组件# 39;), 　　,,,minSize: 0,,//表示在压缩前的最小模块大小,默认值是,30 kb 　　,,,minChunks: 2,,//,最小公用次数 　　,,,优先级:5,,//,优先级 　　,,,reuseExistingChunk: true //,公共模块必开启 　　,,}, 　　,,//其余的第三方包打进供应商 　　,,,供应商:{ 　　,,,测试://\ \]node_modules \ \//, 　　,,优先级:-10 　　,,} 　　,,} 　　之前,})

打包完后会发现dist/静态/js,多了一个vueEditor和公共文件,这就表明分割完成。

<强>映射文件处理和别名设置(别名)

从0到1搭建元素后台框架优化篇(打包优化)