时间:2021-05-18
使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载。那么,怎么优化呢?
1.组件按需加载
这是首先可以优化的点。如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件。
示例如下:
1.1 element-ui
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D然后,将.babelrc 修改为:
{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]}然后引入部分组件,这样一来,就不需要引入样式了,插件会帮我们处理。
// main.jsimport Vue from 'vue'import { Dialog, Loading } from 'element-ui'Vue.use(Dialog)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.service// 然后正常使用组件1.2 mint-ui
由于mint-ui是element-ui的移动端组件,所以它的使用和引入几乎和element-ui一样。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D然后,将.babelrc 修改为:
{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryName": "mint-ui", "style": true } ]]]}然后引入部分组件
// main.jsimport Vue from 'vue'import { Toast, MessageBox } from 'element-ui'Vue.use(Dialog)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.service// 然后正常使用组件注意,element-ui和mint-ui不能同时在.babelrc中进行插件设置,这种情况下,依然可以按需引入,但是不要在.babelrc中配置,在引入的地方同时引入css即可。
1.3 echarts
首先安装babel-plugin-equire
npm i babel-plugin-equire -D然后,在.babelrc文件中添加该插件
{ "plugins": [ // other plugins ... "equire" ]}创建一个js文件
// echarts.js// eslint-disable-next-lineconst echarts = equire([ 'tooltip', 'candlestick', 'bar', 'line', 'axisPointer', 'legend', 'grid'])export default echarts// 业务组件,引入echartsimport echarts from '@/assets/lib/echarts'// 使用与以前一样按需加载echarts
解决vue-cli首屏加载慢的问题
2.路由懒加载
这里需要一个插件
vue-router官方推荐syntax-dynamic-import插件,不过它要求同时安装@bable/core^7.0.0,如果你安装了babel-core6,是会有版本冲突的。我的做法如下
npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)// router.jsconst login = () => import('@/components/login')const router = new VueRouter({ routes: [ { path: '/login', component: login } ]})还有一种魔法注释用法
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
const Foo = () => import( './Foo.vue')3.异步组件
如果组件在页面加载时不需要,只在调用时用到,这时可以使用异步组件的写法。仅仅是引入和组件注册写法不同
// template<test v-if="showTest"></test>// script components: { test: () => import('./test') // 将组件异步引入,告诉webpack,将该部分代码分割打包 }, methods:{ clickTest () { this.showTest = !this.showTest } }4.图片的压缩合并
无损压缩图片:https://press: { warnings: false, drop_console: true, pure_funcs: ['console.log'] }, sourceMap: false})
其中sourceMap: false是禁用除错功能。
如果设为true,在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好,但会大大增加整体资源包的体积,所以将其禁用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue项目打包后上传至GitHub,并实现github-pages的预览1.打包vue项目vue项目:命令行输入打包命令npmrunbuild,生成了dist文
一将Vue项目打包切换到项目目录下,输入cnpmrunbuild打包等待打包完成二URL重写访问我们的一个url原因是vue不是根据项目目录的地址访问的,是根据
一、打包vue项目 在开发完的vue项目输入如下命名,打包生成dist文件夹yarnbuild/npmrunbuild 此时根目录会多出一个文件夹:dist
本文介绍了vue-cli项目打包完成后运行文件路径报错问题,做个笔记,也分享给大家。刚新建的vue-cli项目,同事说要打包一版进行测试,打包完成后放在tomc
问题吾辈使用vue-cli直接生成的vue模板项目,在模板之上继续开发的。然而在使用npmrunbuild打包项目时,却发现打包好的项目在浏览器中直接打开好像什