Vue 打包体积优化方案小结_vue.js

来源:脚本之家  责任编辑:小易  

之前开发项APP项目直接用APICloud+原生js的方式进行编写,整个项目下来发现开发慢,页面代码多且复杂,维护起来相对困难,而且文件大打包之后的APP会比较大,apicloud的框架也不好用,支持部分es67(像let、const、import等es6新特性不支持写的太难受了) 采用vue-cli+APIcloud的方式写解决以上痛点,开发灵活,并且打包之后体积更小速度更快 环境依赖 vue webpack vue-cli3 nodeJS 基本流程 项目开发最好准备两个项目,一个打包APP,一个项目开发,也会减少很多不必要的麻烦 创建项目并初始化 cd到项目想要创建的位置,执行: vue create vue-for-apicloud 选择Manually select features 根据自己需求选择模块(不要Router,因为vue-router跳转页面的效果相比window和frame相比差太多了),按空格键选中,按回车完成选择: 选择css预处理器语言,选择之后可以获得预处理语言支持: 选择eslint: 剩下的配置根据自己情况来设定,等待项目创建完成。 项目结构 项目结构如图:   多页面配置 项目根目录下创建vue.config.js const pages = require('./build/pages') module.exports = { publicPath: './', pages: pages, // 是否生成sourceMap文件 // 开发环境配置true,方便快速定位错误(APICloud控制台输出真的很难受) // 生产环境配置false,构建速度更快,打包之后体积更小 productionSourceMap: true } 项目根目录下创建build文件夹,bulid文件夹下创建page.js const glob = require('glob') // 循环获取文件并打包 console.log('获取页面文件中...') // 读取src/views下所有main.js,可根据自己的情况更改 const files = glob.sync('**/views/**/main.js') const pages = {} files.forEach(item => { // 默认输出到dis文件夹下,输出格式为文件夹名(如果文件夹名为frame则为父文件夹名+frame).html const items = item.split('/') let page = items[items.length - 2] const pageParent = items[items.length - 3] if (page === 'frame') { page = `${pageParent}Frame` } pages 12下一页阅读全文 您可能感兴趣的文章:Vue CLI3基础学习之pages构建多页应用通过vue-cli3构建一个SSR应用程序的方法详解Vue CLI3 多页应用实践和源码设计vue-cli实现多页面多路由的示例代码详解如何将 Vue-cli 改造成支持多页面的 history 模式Vue-cli创建项目从单页面到多页面的方法详解vue-cli + webpack 多页面实例配置优化方法详解vue-cli + webpack 多页面实例应用 vue cli 多页面 apicloud 应用 相关文章 vue-lazyload图片延迟加载插件的实例讲解下面小编就为大家分享一篇vue-lazyload图片延迟加载插件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 vue中路由验证和相应拦截的使用详解这篇文章主要为大家详细介绍了vue中路由验证和相应拦截的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-12-12 vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】这篇文章主要介绍了vue自定义键盘信息、监听数据变化的方法,结合实例形式分析了vue.js基于vm.$watch进行事件监听相关操作技巧,需要的朋友可以参考下 2019-03-03 Vue.js数据绑定之data属性这篇文章主要为大家详细介绍了Vue.js数据绑定之data属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 详解使用webpack打包编写一个vue-toast插件本篇文章主要介绍了详解使用webpack打包编写一个vue插件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 vue中简单弹框dialog的实现方法下面小编就为大家分享一篇vue中简单弹框dialog的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 浅谈Vuex注入Vue生命周期的过程这篇文章主要介绍了Vuex 注入 Vue 生命周期的过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-05-05 vue.js开发实现全局调用的MessageBox组件实例代码最近学习了Vue.js,感觉组件这个地方知识点挺多的,而且很重要,所以决定记录下,下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-11-11 vue首次赋值不触发watch的解决方法今天小编就为大家分享一篇vue首次赋值不触发watch的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 vue通过点击事件读取音频文件的方法最近做项目遇到这样的一个需求,通过select元素来选择音频文件的名称,点击按钮可以进行试听。接下来通过本文给大家介绍vue项目中通过点击事件读取音频文件的方法,需要的朋友可以参考下 2018-05-05 最新评论www.zgxue.com防采集请勿采集本网。

Vue-cli3 打包体积优化方案

前言:

公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小

npm install webpack-bundle-analyzer -save-dev

在vue.config.js中进行配置

module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) }}

执行npm run build 或者 npm run serve 会出现这花里胡哨的界面用来分析文件大小

分析

还没进行优化前vendor~app.xxxx.js 有1.18MB,咱们可以查看各个bundle大小,针对性的进行优化

优化

CDN加载

对于vue、vue-router、vuex、axios等都可以在生产环境用CDN加载

const externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios'}const cdn = { css: [], js: [ 'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js', 'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js', 'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js', 'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js', ]}module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn } return args }) },configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { externals: externals, }; } },}

接着修改pubilc/index.html文件

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.png" rel="external nofollow" > <!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style"> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet"> <% } %> <!-- 使用CDN的JS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script"> <% } %> <title>上海比户</title></head><body> <noscript> <strong></strong> </noscript> <div id="app"></div> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %></body></html>

路由懒加载

当打包应用的时候,JavaScript包会变的特别大,影响页面加载,如果这时我们在访问路由的时候去加载该模块,那会变的十分高效,把静态引入方式改为动态引入方式

import ComponentA from '../page/components/ComponentA';routeList = [ { path: '/comA', component: ComponentA },]//改为routeList = [ { path: '/comA', component: () => import('../page/components/ComponentA') },]

由于我的项目一开始就用了路由懒加载,所以在打包文件上看不出体积大小的变化,但是大概会有个300k的大小减少

在vue cli3中,我们还需要手动移除prefetchPreload,因为在vue cli 官方文档上提到,可以去了解下,我这大致概括了下

就是当首屏加载的时候,会一次性下载完所以的路由文件,这会导致首屏的时候请求内容变多,首屏加载变慢,修改如下

module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn } return args }) // 移除 prefetch 插件 config.plugins.delete('prefetch') // 移除 preload 插件 config.plugins.delete('preload'); }, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { externals: externals, }; } },}

element-ui 按需加载

看element-ui/lib 这个包就占了总包大小的三分之二,554k,总包也就700多k,所以如果把element-ui 按需加载,那就可以减少体积,按需加载这就不说了吧,都会~:stuck_out_tongue_closed_eyes:

但是需要在 babel.config.js文件中添加(vue cli3 中需要安装 babel-plugin-component)

module.exports = { presets: ['@vue/app'], //加上这~ plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ] ]};

gzip

安装 compression-webpack-plugin

nmp i compression-webpack-plugin -D

在vue.config.js中引入

const CompressionPlugin = require('compression-webpack-plugin');module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn } return args }) // 移除 prefetch 插件 config.plugins.delete('prefetch') // 移除 preload 插件 config.plugins.delete('preload'); }, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { externals: externals, plugins: [ //gzip压缩 new CompressionPlugin({ test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/, //匹配文件名 threshold: 10240, //对超过10k的数据压缩 deleteOriginalAssets: false //不删除源文件 }) ], performance: { hints: false } }; } },}

可以在上面的图看到,进行gzip压缩后的文件最大的也只有140k了

但是还需要在服务端配置

scss文件引入

我们通常会把scss文件抽离出来,一些共用样式,主题等,然后会在每个需要的组件中引入会显得繁琐,我们可以借助scss-loader进行预处理

例如我们有 resetTable.scss 文件,可以在vue.config.js中引入

module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) config.plugin('html').tap(args => { if (process.env.NODE_ENV === 'production') { args[0].cdn = cdn } return args }) // 移除 prefetch 插件 config.plugins.delete('prefetch') // 移除 preload 插件 config.plugins.delete('preload'); }, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { externals: externals, plugins: [ //gzip压缩 new CompressionPlugin({ test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/, //匹配文件名 threshold: 10240, //对超过10k的数据压缩 deleteOriginalAssets: false //不删除源文件 }) ], performance: { hints: false } }; } }, // scss设置 css: { loaderOptions: { sass: { //我是放在 assets/commcss 目录下 data: '@import "@assets/commcss/resetTable.scss";' } }, },}

上面这图就是完整的vue.config.js配置啦~

总结:

​ 以上就是目前我在项目中优化的点,但肯定还有其他的优化地方,可以相互讨论

到此这篇关于Vue 打包体积优化方案小结的文章就介绍到这了,更多相关Vue 打包体积优化内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌。今天我们以vue cli3.x来说一说如何行之有效的缓解此问题! 方法一 路由懒加载 首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面,而路由懒加载就是来解决这个问题的。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。下面这个就是vue路由懒加载的一个具体例子。方法很简单,如果您不想深入了解,只需按照这个格式引入路由就可以了。如果您对路由懒加载感兴趣,请移步vue-router路由懒加载 方法二 组件按需加载 为什么要按需加载组件呢?原因也很简单,一些组件库包含丰富的组件,如果我们直接将其引入,不免会引入一些我们压根用不到的组件。这样打包起来体积会比较大,同样显得我们很不专业。因此按需引入就显得很必要了。我们现在就拿iview组件库为例,了解一下按需引入的流程。 1.首先引入按需加载工具 babel-plugin-import babel-plugin-import是babel它会在编译过程中将 import 的写法自动转换为按需引入的方式。 npm install babel-plugin-import --save-dev 2.在项目根目录创建.babelrc文件并配置按需加载内容 { "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]] } 3.在main.js配置项目需要加载的组件 下面是iview的一个例子 这里需要注意全局注册的组件需要挂在到vue原型上,例如我们需要使用Notice组件,那我就需要 Vue.prototype.$Notice = Notice; 这样我们就可以正常的使用iview的组件了。 方法三 使用CDN加速策略 在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,那么vendor.js文件体积将会相当的大,影响首开的体验。解决方法是,将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。外部的库文件,就可以使用CDN资源。vue cli3.x在配置cdn是和vue cli2.x有一些区别,vue cli在升级后,代码结构变化比较大,配置文件集成到了vue.config.js文件中。下面以amap、axios和qs为例讲述如何使用cdn加载资源。 1.在index.html中引入相关cdn资源 2.配置externals vue cli3.x 配置webpack是在vue.config.js的configureWebpack中 配置完之后,我们就可以正常使用全局的Amap、axios和Qs了 方法四 使用compression-webpack-plugin将文件打包成gzip格式 compression-webpack-plugin这个依赖在npm run build是会生成.gz文件。之后项目访问的文件就是这个.gz文件,正常的项目打包体积会减少一半还要多,是不是很吊 下面我们来进一步讲述这个这个依赖的使用流程。 1.npm 引入 npm install compression-webpack-plugin --save-dev 2.vue cli3.x在 vue.config.js配置webpack 3.nginx开启gzip模式 在上一步前端就已经配置好了,之后就是nginx配合开启gzip模式,这个比较简单,只要你对nginx有一点了解,我们在nginx.conf中的http中配置一些代码 4.验证是否配置成功 这步就很简单了只需要查看chunk类文件的Response Headers的Content-Encoding是否是gzip即可 以上就是解决vue首屏加载慢的一些方法,希望文章能帮助大家解决问题谢谢。也希望大家多多支持脚本之家。 您可能感兴趣的文章:vue-cli 首屏加载优化问题浅谈VUE单页应用首屏加载速度优化方案浅谈vue首屏加载优化vue-cli项目优化方法- 缩短首屏加载时间Vue项目使用CDN优化首屏加载问题浅谈Vue SPA 首屏加载优化实践浅谈vue项目优化之页面的按需加载(vue+webpack)详解vue项目首页加载速度优化内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue项目总结之webpack常规打包优化方案
  • 关于vue-cli 3配置打包优化要点(推荐)
  • 浅谈vue项目打包优化策略
  • 详解vue打包优化之code spliting
  • vue webpack打包优化操作技巧
  • vue-cli webpack2项目打包优化分享
  • 详解如何使用vue-cli脚手架搭建vue.js项目
  • vue2.x组件学习心得(新手必看篇)
  • vue源码分析之vue实例初始化详解
  • vuex 入门教程
  • 利用electron简单撸一个markdown编辑器的方法
  • vue2.0的contextmenu右键弹出菜单的实例代码
  • vue2.x和vue3.0数据响应原理变化的区别
  • vue.js实现微信过渡动画左右切换效果
  • vue 优化cdn加速的方法示例
  • 使用 vue 实现灭霸打响指英雄消失的效果附demo
  • 浅谈vue加载优化策略
  • 基于vue-cli3多页面开发apicloud应用的教程详解第1/2页
  • 详解Webpack如何引入CDN链接来优化编译后的体积
  • 3D曲面作图软件有哪些
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue项目总结之webpack常规打包优化方案关于vue-cli 3配置打包优化要点(推荐)浅谈vue项目打包优化策略详解vue打包优化之code splitingvue webpack打包优化操作技巧vue-cli webpack2项目打包优化分享详解如何使用vue-cli脚手架搭建vue.js项目vue2.x组件学习心得(新手必看篇)vue源码分析之vue实例初始化详解vuex 入门教程利用electron简单撸一个markdown编辑器的方法vue2.0的contextmenu右键弹出菜单的实例代码vue2.x和vue3.0数据响应原理变化的区别vue.js实现微信过渡动画左右切换效果vue 优化cdn加速的方法示例使用 vue 实现灭霸打响指英雄消失的效果附demovue引用js文件的多种方式(推荐)简单理解vue中props属性vue之父子组件间通信实例讲解(prvue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vue使用echarts图表的详细方法vue 巧用过渡效果(小结)vue.js父子组件通信动态绑定的实例谈谈我在vue-cli3中用预渲染遇到的坑vue添加axios,并且指定baseurl的方法vue插槽slot的简单理解与用法实例分析vue项目中跨域问题解决方案vee-validate的使用方法详解vue ajax跨域请求实例详解vue2.0 vue-source jsonp 跨域请求
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved