vue项目打包优化方式(让打包的js文件变小)

目录
  • 我使用的命令是 vue ui 可视化打包操作
  • 进入可视化面板
  • 需要通过vue.config.js来配置
  • .js文件中,导致该js文件过大

通常在一个vue项目中会用到很多插件什么,swiper,axios,vuerouter,vuex,…,那么使用了很多插件势必会造成打包的js文件过大,影响加载速度,造成不好的用户体验,那么我就来讲一件我自己总结打包方式,(让js文件变小)

我使用的命令是 vue ui 可视化打包操作

进入可视化面板

默认情况下,vue-cli 3.0生成的项目,隐藏了webpack配置项,如果我们需要配置webpack

需要通过vue.config.js来配置

在项目根目录中创建vue.config.js文件,

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口,调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

补充:

chainWebpack可以通过链式编程的形式,修改webpack配置

configureWebpack可以通过操作对象的形式,修改webpack配置

**###7.加载外部CDN

默认情况下,依赖项的所有第三方包都会被打包到js/chunk-vendors.

.js文件中,导致该js文件过大

那么我们可以通过externals排除这些包,使它们不被打包到js/chunk-vendors.

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口,调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
            //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                moment:'moment'
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

在public 中的index文件中使用cdn引入外部js 从而然打包的js文件体积变小

我们来看下 没有使用externals设置排除项 打包的js体积大小

来看下使用externals设置排除项以后的大小

明显变小了,而且把项目跑在服务器上 明显加载速度提升了很多

其他的优化还有 使用vuerouter 的路由懒加载,这里就不再赘述,vuerouter懒加载解释

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue项目打包编译优化方案

    1. 不生成.map文件 默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件. 我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的,可以加快打包速度,但会增大打包体积,线上我们是不需要这个代码的.这里我们需要配置不生成map文件. vue-cli2 config/index.js文件中,找到 productionSourceMap: true 这一行,将 true 改为 f

  • 浅谈vue项目打包优化策略

    使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以优化的点.如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件. 示例如下: 1.1 element-ui 首先,安装 babel-plugin-component: npm install babe

  • Vue项目优化打包详解

    目录 前言 一.路由懒加载 1.为什么需要路由懒加载 2.如何实现路由懒加载 3.路由懒加载中的魔法注释 二.分析包大小 1.需求 2.如何生成打包分析文件 三.webpack配置排除打包 1.需求 2.排除打包 四. 引用网络资源 1.需求 2.CDN 3. 实现步骤 五. 打包去除console.log 1.需求 2.代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优化吧~ 一.路由懒加载

  • vue项目打包优化方式(让打包的js文件变小)

    目录 我使用的命令是 vue ui 可视化打包操作 进入可视化面板 需要通过vue.config.js来配置 .js文件中,导致该js文件过大 通常在一个vue项目中会用到很多插件什么,swiper,axios,vuerouter,vuex,…,那么使用了很多插件势必会造成打包的js文件过大,影响加载速度,造成不好的用户体验,那么我就来讲一件我自己总结打包方式,(让js文件变小) 我使用的命令是 vue ui 可视化打包操作 进入可视化面板 默认情况下,vue-cli 3.0生成的项目,隐藏了w

  • Vue项目总结之webpack常规打包优化方案

    由于新建项目发版打包时间大概需要 30分钟 ,发版时 严重 拖慢 下班 时间,所以特意查看了相关文档来优化打包速度,争取早点下班,^_^. 分析打包文件 要优化,先分析.我们先要知道到底是哪里拖慢我们的打包速度呢? 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改 webpack.prod.conf.js 文件 const BundleAnalyzerP

  • vue项目两种方式实现竖向表格的思路分析

    问题描述 在我们做项目中,常见的是横向表格,但是偶尔的需求,也会做竖向的表格.比如下图这样的竖向表格: 我们看到这样的效果图,第一时间想到的是使用UI框架,改一改搞定.但是饿了么UI并没有直接提供这样的案例,部分同学会想着使用饿了么UI中的el-table的合并行.合并列的方式去实现,其实如果这样去做的话,反而做麻烦了.比如下面的合并行合并列: 类似于这样的效果图,其实并不一定非得使用UI组件,有的时候使用原生的方式去做.反而会更方便.本文介绍两种方式去实现这样的简单的竖向表格.实际场景中可能会

  • vue项目接口管理,所有接口都在apis文件夹中统一管理操作

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理 本文使用vue-cli生成的项目举例 使用接口管理之前 在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如: xxx.vue <template> <div id="areaTree"> <!-- 标题 --> <div

  • Vue 项目性能优化方案分享

    目录 前言 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch  区分使用场景 1.3.v-for遍历必须为item添加key,且避免同时使用v-if 1.4.长列表性能优化 1.5.事件的销毁 1.6.图片资源懒加载 1.7.路由懒加载 1.8.第三方插件的按需引入 1.9.优化无限列表性能 1.10.服务端渲染 SSR or 预渲染 二.Webpack 层面的优化 2.1.Webpack 对图片进行压缩 2.2.减少 ES6 转为

  • vue 代码压缩优化方式

    目录 vue代码压缩优化 设置productionSourceMap为false 代码压缩 图片资源压缩 开启gzip压缩 vuecli3代码压缩混淆 现将混淆流程记录如下 vue代码压缩优化 设置productionSourceMap为false 如果不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建. 设置为false打包时候不会出现.map文件 module.exports = {     productionSourceMap: false } 代码压

  • 如何解决vue项目打包后文件过大问题

    目录 为什么打包后文件过大? 如何快速解决 1.路由懒加载[使用es6提案的import()方式] 2.CDN引入 为什么打包后文件过大? 移动app项目,使用vue-cli脚手架搭建,UI主要运用的是Muse-UI,开发过程中为满足需求,混入Element-UI部分组件,加之团队开发,前端不止一人参与,在没有统一规范约束的情况下,编码风格和方式都很迥异和…混乱,以致依赖过多,打包时webpack把所有的库都打包在一起,所以vendor.js文件和app.js文件很大,最后出现进入首个页面时会长

  • vue项目打包发布后接口报405错误的解决

    目录 vue项目打包发布后接口报405 vue项目打包之后接口出现错误问题 错误信息 关键代码 解决方式 vue项目打包发布后接口报405 vue项目前端做了代理打包后后台不识别报405 not allowed vue.config.js文件配置   devServer: {     // host: "0.0.0.0", //项目运行时的本地地址     // port: 8880, // 端口号     //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • 如何使用HBuilderX把vue项目打包成apk

    目录 1. 下载HBuilderX 2. 安装HBuilderX 3. 在vscode中打包vue项目 3.1 在打包vue项目之前 3.2 执行打包命令 4. 在HBuilderX中打包apk 4.1 在HBuilderX中新建一个项目 4.2 把之前打包的dist下的内容拷贝到此工程下面 4.3 删除不要的目录 4.4 点击:manifest.json,进行以下配置 1. 下载HBuilderX 官网下载地址:https://www.dcloud.io/hbuilderx.html 2. 安

随机推荐