---恢复内容开始---

  从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供一下方便。

  一开始项目部署到线上后第一次访问首页的时间是7、8秒的样子,页面加载太慢了自己都接受不了何况用户。

  主要是从一下几步来优化的:

  1、vue路由的加载方式

import Home from '@/components/Index'

改为

const Index = resolve => require(['@/components/Index'], resolve)

  上面那种普通的加载方式的缺点是把所有的路由打包在一个js文件里面页面多的话这个文件会非常大加载的很慢。

  下面这种方式是按需加载在访问的时候只加载相关的路由,又被叫做(懒加载)

  2、第三方依赖包的引入

    main.js

import Vue from 'vue'
import router from './router'
import Element from 'element-ui'
import echarts from 'echarts' Vue.use(Element)
Vue.prototype.echarts = echarts new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>'
})

    这样引入依赖包会把所依赖的第三方包全都打包起来从而造成打包后的 app.js和vendor.js文件过大加载的很慢,把这种方式改为CDN引入。

    首先把main.js种引入的第三方包注释掉,vue不用注释

import Vue from 'vue'
//import router from './router'
//import Element from 'element-ui'
//import echarts from 'echarts' //Vue.use(Element)
//Vue.prototype.echarts = echarts new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>'
})

    在webpack.base.conf.js中增加以下设置,这样就不会把依赖包打包到自己的项目里面了

module.exports = {

  externals: {
'vue': 'Vue',
'element-ui': 'ElementUI',
'echarts': 'echarts',
} }

    然后在index.html中用CDN的方式引入

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.11.0/theme-chalk/index.css">
  <title></title>
</head>
<body>
<div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.11.0/index.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</body>
</html>

    这样在打包的时候就不会把这些依赖包打包到里面,vendor.js有之前的2M多变成了200多K。

  3、打包生成压缩包,同时不生成.amp文件

    先安装 npm install --save-dev compression-webpack-plugin

    找到config/index.js 修改productionSourceMap: false,默认是true修改为false这样打包的时候就不会生成.map文件

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', /**
* Source Maps
*/ productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

    打包生成压缩包修改  productionGzip:true 默认是false 修改为true,修改完成后设置webpack.prod.conf.js, 这个设置在vue-lic 2.0以上版本中默认就已经设置好了,所以就不用

  手动设置。

if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}

  npm run build 有可能会报错

ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties

  这个错误是compression-webpack-plugin的版本的问题,我安装的版本是 @1.0.0 可以成功打包

  打包生成压缩包部署到线上需要后台的配合设置 nginx 开启:gzip

    设置完以上及步骤后现在的速度保持在1s左右,打包后的js文件也变得很小了。

    以上是我对项目速度优化的全部步骤希望对有需要的小伙伴们有所帮助!!

---恢复内容结束---

  从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供一下方便。

  一开始项目部署到线上后第一次访问首页的时间是7、8秒的样子,页面加载太慢了自己都接受不了何况用户。

  主要是从一下几步来优化的:

  1、vue路由的加载方式

import Home from '@/components/Index'

改为

const Index = resolve => require(['@/components/Index'], resolve)

  上面那种普通的加载方式的缺点是把所有的路由打包在一个js文件里面页面多的话这个文件会非常大加载的很慢。

  下面这种方式是按需加载在访问的时候只加载相关的路由,又被叫做(懒加载)

  2、第三方依赖包的引入

    main.js

import Vue from 'vue'
import router from './router'
import Element from 'element-ui'
import echarts from 'echarts' Vue.use(Element)
Vue.prototype.echarts = echarts new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>'
})

    这样引入依赖包会把所依赖的第三方包全都打包起来从而造成打包后的 app.js和vendor.js文件过大加载的很慢,把这种方式改为CDN引入。

    首先把main.js种引入的第三方包注释掉,vue不用注释

import Vue from 'vue'
//import router from './router'
//import Element from 'element-ui'
//import echarts from 'echarts' //Vue.use(Element)
//Vue.prototype.echarts = echarts new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>'
})

    在index.html中用CDN的方式引入

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.11.0/theme-chalk/index.css">
  <title></title>
</head>
<body>
<div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.11.0/index.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</body>
</html>

    这样在打包的时候就不会把这些依赖包打包到里面,vendor.js有之前的2M多变成了200多K。

  3、打包生成压缩包,同时不生成.amp文件

    先安装 npm install --save-dev compression-webpack-plugin

    找到config/index.js 修改productionSourceMap: false,默认是true修改为false这样打包的时候就不会生成.map文件

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', /**
* Source Maps
*/ productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

    打包生成压缩包修改  productionGzip:true 默认是false 修改为true,修改完成后设置webpack.prod.conf.js, 这个设置在vue-lic 2.0以上版本中默认就已经设置好了,所以就不用

  手动设置。

if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}

  npm run build 有可能会报错

ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties

  这个错误是compression-webpack-plugin的版本的问题,我安装的版本是 @1.0.0 可以成功打包

  打包生成压缩包部署到线上需要后台的配合设置 nginx 开启:gzip

    设置完以上及步骤后现在的速度保持在1s左右,打包后的js文件也变得很小了。

    以上是我对项目速度优化的全部步骤希望对有需要的小伙伴们有所帮助!!

vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大的更多相关文章

  1. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  2. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  3. vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1

    1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...

  4. webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...

  5. mac下搭建基于vue-cli 3.0的Element UI 项目

    1.安装yarn管理工具(包含node.js); 2.安装全局vue-cli全家桶: yarn global add @vue/cli 3.创建.测试一个vue-cli项目: vue create a ...

  6. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  7. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  8. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  9. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

随机推荐

  1. linux udev 自动挂载 SD卡/U盘

    本文记录使用udev自动挂载SD卡和U盘的方法. 参考链接 http://blog.chinaunix.net/uid-26119896-id-5211736.html 添加udev规则 创建文件/e ...

  2. 跨站请求伪造 CSRF / XSRF&lt;二:应用&gt;

    防御的方法主要有两种<java示例> 1.检查Referer字段 HTTP头中有一个Referer字段,这个字段用以标明请求来源于哪个地址.在处理敏感数据请求时,通常来说,Referer字 ...

  3. javascript中的链表结构—双向链表

    1.概念 上一个文章里我们已经了解到链表结构,链表的特点是长度不固定,不用担心插入新元素的时候新增位置的问题.插入一个元素的时候,只要找到插入点就可以了,不需要整体移动整个结构. 这里我们了解一下双向 ...

  4. 基于DDD的.NET开发框架 - ABP启动配置

    返回ABP系列 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...

  5. poj1062 最短路

    题意:有n个物品,任务是得到1号物品,现在每个物品有它的主人,你可以用金钱购买物品,当然也可以用其他物品加上优惠的价格换取,但是有个要求,因为每个物品的主人有各自的等级,你所交易过的人中,等级差不能超 ...

  6. 深入探讨ES6生成器

    如果对于ES6生成器不熟悉,请先阅读并运行下http://www.cnblogs.com/linda586586/p/4282359.html里面的代码.当你感觉掌握了基础之后,我们可以深入探讨一些细 ...

  7. Part 57 to 58 Why should you override ToString and Equal Method

    Part 57 Why should you override ToString Method sometimes you can override ToString method like that ...

  8. FPGA工程中用C语言对文件进行处理_生成mif文件

    本博客中有用verilog处理文件数据的代码,本博文采用C 处理文件中的数据. 有时候要生成一个mif文件—— altera memory  initial file.本次工程中我得到的是一个大型的数 ...

  9. (转)Hadoop MapReduce链式实践--ChainReducer

    版本:CDH5.0.0,HDFS:2.3.0,Mapreduce:2.3.0,Yarn:2.3.0. 场景描述:求一组数据中按照不同类别的最大值,比如,如下的数据: data1: A,10 A,11 ...

  10. python基础===随机打印txt文件中的某一行

    def find(): txt = open(r'F:\send1.txt','rb') data = txt.read().decode('utf-8') #python3一定要加上这句不然会编码报 ...