webpack优化 -- compression-webpack-plugin 开启gzip

打包的时候开启gzip可以大大减少体积,非常适合于上线部署。下面以vue-cli2.x项目为例,介绍如何在vue中开启gzip。(摘自网络:https://www.cnblogs.com/blogs-xlf/p/11365859.html)

步骤

安装 compression-webpack-plugin

注意,目前最新版需要运行在webpack4.0以上,如果你的webpack是3.x版本的,请安装compression-webpack-plugin的1.x版本(笔者安装的是1.1.12)。

npm install compression-webpack-plugin -D

改造vue项目配置

  1. config/index.js文件中修改productionGzip: true;
  1. build/webpack.prod.conf.js文件中的plugins添加下面的代码, vue-cli2.x默认已经写好了,则不用管

new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})

查看压缩前后的大小对比

如果想知道压缩前后的大小情况,可以使用webpack-bundle-analyzer插件,vue-cli2.x默认引进的不用管。然后在package.json文件中添加下面的script命令:


"report":"npm run build --report=true" 另:
实际项目中的代码:
const needGzip = false
module.exports = {
.....................
  chainWebpack: (config) => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    if (process.env.NODE_ENV === 'production') {
      if (process.env.npm_config_report) {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
      }
    }
    if (needGzip) {
      // GZip 生产环境 GZip
      config.plugin('compressionPlugin')
        .use(new CompressionPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.css$|\.ttf$|\.html$|\.svg$|\.json$|\.js$/,
          threshold: 10240, // 只有大小大于该值的资源会被处理
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: true// 删除原文件
        })
        )
    }
  },
 
  
.....................
  
  lintOnSave: true
}

webpack 的externals配置

按照官方文档的解释,如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的,但是也可以在我们项目开发中充分使用。

假设:以jquery为例子,目的是在runtime时通过cdn获取jquery依赖,在打包时忽略他的打包

步骤一:

//index.html
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>

步骤二:

//webpack.config.js

module.exports = {
//...
externals: {
jquery: 'jQuery'
//将需要忽略打包的都写在这个里面,但前提是index.html文件里面必须script引入
}
};
//属性名jquery指的是 import $ from 'jquery'中的 'jquery'
属性值 jQuery指的是jquery插件暴露出来的全局对象名。按理来说$应该也是可以写在属性值里面的,(也是jquery暴露的啊,但我没试过行不行)

步骤三:

文件中的
import $ from 'jquery';
千万不能去掉。 很重要,好多人就是把它去掉了跑过来问我为啥我的还是报错jquery is undefined。
vue项目:
module.exports={
   ..........

 configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      'element-ui': 'ELEMENT',
      echarts: 'echarts'
    },

plugins:[],
.........
}

webpack做项目优化的更多相关文章

  1. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  2. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

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

  3. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  4. vue-cli内部webpack的打包优化

    在此之前,我们先谈谈前端项目的性能优化. 优化前端项目无非就是2方面的优化: 一.网络性能优化(重点) 减少请求数量(webpack的天职就是打包) 减少请求资源大小(压缩gzip,后端会完成) CD ...

  5. vue spn如何做seo优化

    vue spn如何做seo优化 突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spn对seo不够优化,因而官方考虑到直接使用ssr 一个不算解决办法的办法prerender-spa ...

  6. 新公司官网项目优化实践(Vue)

    入职后接手website-html和website-mobile项目,发现项目加载速度不太理想,于是结合自己之前的经验对项目做了优化.此篇文章主要记录这次优化详情. 原始项目:开发环境:website ...

  7. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

  8. 82.使用vue后怎么针对搜索引擎做SEO优化?

    什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...

  9. 【C#】项目优化实战

    [C#]项目优化实战 一. 数据库设计 1. 常量的枚举值直接存中文不要存数字(注意是常量,如果显示值可变就不能) 例如:男女,在数据库中不要存1和0,直接存男和女. 这样的好处:读取数据的时候可以避 ...

随机推荐

  1. Linux进程间通信之《共享内存》入门

    目录 简述 代码 写端代码 读取端代码 编译 运行 简述 共享内存是Linux系统进程间通信常用的方式,通常用于数据量较大的情况,如果只是用于不同的进程间消息通知,那不如用消息队列或者socket.之 ...

  2. Python分析「我们为什么这么穷」

  3. Nginx - location常见配置指令,alias、root、proxy_pass

    1.[alias]——别名配置,用于访问文件系统,在匹配到location配置的URL路径后,指向[alias]配置的路径.如: location /test/ { alias/first/secon ...

  4. axios的post请求返回状态码400

    设置拦截 axios.interceptors.request.use((config) => { if (config.method === 'post') { if (!config.isF ...

  5. 用Java制作斗地主

    首先,按照斗地主规则,完成洗牌发牌的动作.如图: 具体规则: 1. 组装54张扑克牌 2. 将54张牌顺序打乱 3. 三个玩家参与游戏,三人交替摸牌,每人17张牌,最后三张留作底牌. 4. 查看三人各 ...

  6. 2020-03-27:JDK1.8中在数据结构上,对HashMap做了什么样的改进?为什么?

    福哥答案2020-04-04:头插改尾插,解决链表成环的问题.链表改成链表和红黑树.

  7. C#算法设计查找篇之04-斐波那契查找

    斐波那契查找(Fibonacci Search) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/704 访问. 斐波那契 ...

  8. js对象的数据属性和访问器属性

    js面向对象 ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现javascript引擎用的,因此 ...

  9. Vue中 props 这些知识点

    如果你一直在阅读有关"props"内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么.或者如何正确使用它们,并充分利用它们. 当你读完这篇指南 ...

  10. Python 函数为什么会默认返回 None?

    Python 有一项默认的做法,很多编程语言都没有--它的所有函数都会有一个返回值,不管你有没有写 return 语句. 本文出自"Python为什么"系列,在正式开始之前,我们就 ...