优化:

1:外部引入模块(cdn)
     如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302。

2:图标优化
     不管后台还是移动端避免不了icon的使用,使用字体图标,还需引入字体文件,如果字体丢失 会影响到icon显示效果,推荐转换base64 后引用。

3:统一模块

如:moment我们可能在多个页面使用  没必要每个页面进行import引入,可以在入口文件(index.js 或main.js)全局配置

   例如:

      import Vue from 'vue'           
      Vue.prototype.$moment = moment;

    以后在每个页面都可以直接使用 this.$moment ,  不在需要每个页面import 'moment' 。

     moment 有各种语言包,总大小200k+,如使用webpack打包 建议过滤掉其他语言

    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 
    或 new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/)

4:分离第三方库


entry: {    
  app: './src/main.js', //设置入口文件
  
  vendors: ['vue', 'vue-router', 'moment']
},




    

plugins[
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'manifest'], // 如果有manifest 每次打包压缩后的文件不会改变hash
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),]

 

  使用 CommonsChunkPlugin插件配置 每次build后,都会重新设置hash,导致Etag不同,每次上线都会更新Etag, 无法利用浏览器缓存。

下图优化大小:

 后台项目:总大小 20M 减少到4.2M   后台4.2M, 在开启gzip压缩下,勉强凑合。

  

优化后:
 

移动端:2.0M减少到830K,开启gzip 大概在400-500k左右。

      

  

webpack打包体积优化的更多相关文章

  1. webpack 打包性能优化

    webpack 打包性能优化 开启多线程打包 thread-loader https://www.npmjs.com/package/thread-loader https://github.com/ ...

  2. vue 应用生产环境的 webpack 打包配置优化

    转:https://blog.csdn.net/robin_star_/article/details/83856363 前言:很好的打包优化的帖子,还没来的急去实测验证 1. 去掉 console ...

  3. Webpack打包效率优化篇

    Webpack基础配置: 语法解析:babel-loader 样式解析:style-loader css解析:css-loader less解析:less-loader 文件解析:url-loader ...

  4. webpack 与 vue 打包体积优化

    webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...

  5. webpack打包性能优化

    1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebp ...

  6. vue打包体积优化之旅

    webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...

  7. webapck 打包体积优化策略

    一.概述 1.Tree-shaking 2.公共资源分离 3.图片压缩 二.Tree-shaking Tree-shaking:1个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到 ...

  8. Webpack 打包之体积优化

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  9. [转] Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

随机推荐

  1. 简单的使用Seajs

    什么是Seajs Seajs是一个加载器 http://yslove.net/seajs/ 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 兼容性 Chrome 3+ Firefox ...

  2. CentOS7 yum安装zabbix3.2.6

    前言: 本人小白,在一个多月前通过面试进入公司,在进入公司的第一天,老板把我叫到他办公室,坐下来慢慢喝茶,吹牛,给我吹他们以前做的软件,经营的产品,还装作一副什么都告诉我的样子,其实这都是套路,我早已 ...

  3. PHP实现跨域解决方法

    如果要实现跨域通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com. 如 ...

  4. String.valueOf() 方法的使用

      1. 由 基本数据型态转换成 String String 类别中已经提供了将基本数据型态转换成 String 的 static 方法 也就是 String.valueOf() 这个参数多载的方法 ...

  5. windows下安装DB2数据库以及使用Aqua Data Studio链接数据库

    本文只是作为自己的心得体会,不具有一般性! 1.其实安装DB2数据库还是比较简单的,一般都是直接下一步下一步就可以了,只是有些地方需要注意.我安装的DB2数据库版本如下图所示: 2.拿到数据库的版本之 ...

  6. 修改tomcat编码方式

    打开server.xml <Connector URIEncoding="UTF-8" connectionTimeout="20000" port=&q ...

  7. 【转载】java InputStream读取数据问题

    原文链接:http://www.cnblogs.com/MyFavorite/archive/2010/10/19/1855758.html 1. 关于InputStream.read()     在 ...

  8. (转)log4j(四)——如何控制不同风格的日志信息的输出?

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 1 老规矩,先来个栗子,然后再聊聊感受 import org.apache.log4j.*; //by godtrue p ...

  9. (转)JAVA堆栈操作

    java.util.Queue用法(是util中的一个接口) 队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行 ...

  10. ECMAScript 6 学习(二)async函数

     1.什么是async函数 2.用法 2.1基本用法 3.语法 3.1返回promise对象 3.2promise状态的变化 3.3await命令 1.什么是async函数 async函数也是异步编程 ...