webpack打包性能优化之路

2019-01-12 admin

性能优化的路没有穷尽,只有更快。打开页面越快越好,点击响应越快越好。在当今这个以快为主的时代,快才是王道。闲话扯完,说正事!!!

该优化方案以最近做的一个hybrid webapp为实例演示。

路由懒加载

(1)vue-router文件中的router使用懒加载方式。如下图所示

(2)在vue文件中,也采用类似方式引入其他vue组件

const showImage = () => import('@/components/common/showImage');

这个优化的方式在vue官网也有介绍,传送门

启用gzip压缩和关闭sourcemap

所有现代浏览器都支持 gzip 压缩并会为所有 HTTP 请求自动协商此类压缩。启用 gzip 压缩可大幅缩减所传输的响应的大小(最多可缩减90%),从而显著缩短下载相应资源所需的时间、减少客户端的流量消耗并加快网页的首次呈现速度。 如下图所示

如果你使用的是vue-cli2生成的项目的话,在config文件夹下的index.js中可以找到这段代码。记得开启gzip压缩前要安装一个插件,如途中注释掉的一段代码所示。

生产环境去掉console代码,减少代码体积,使用uglifyjs压缩代码

图片优化

对于网页来说,在所下载的字节数中,图片往往会占很大比例。因此,优化图片通常可以卓有成效地减少字节数和改进性能:浏览器需要下载的字节数越少,对客户端带宽的争用就越少,浏览器下载内容并在屏幕上呈现内容的速度就越快。 尽量减少图片的使用,或者使用css3来代替图片效果。如果不行的话,小图片通过一定的工具合成雪碧图或者转成base64。

引用的库尽量按需加载。

(1)像一般的ui库element,vant等库都提供来按需加载的方式,避免全部引入,加大项目体积。 (2)以cdn方式载入需要的库,也可以减少打包后的体积。 在index.html文件中

引入mintui

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

引入vue

<!-- 开发环境使用此方案-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!-- 生产环境使用此方案 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

以这种外链方式引入mint-ui和vue后,需要做些别的配置 (1)在入口文件main.js 中就不需要引入vue和mintui了 (2)在buildwebpack.base.conf.js中添加如下配置,意为打包的时候不打包vue和mint-ui。

externals:{
  "mint-ui":"mintui",
  "vue":"Vue"
},

使用DllReferencePlugin

将平时不经常变动的文件抽离出来,统一打包,这样也可以减少后续打包的时间。

  • 在build文件夹中新建一个webpack.dll.conf.js.
const path = require('path')
const webpack = require('webpack')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {
    vendor: [
        //根据实际情况添加
      'axios',
      'vue/dist/vue.min.js',
      'vue-router',
      'vuex',
      'mint-ui'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules\/(?!(autotrack|dom-utils))/
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false // set to true if you want JS source maps
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    /*
      @desc: https://webpack.js.org/plugins/module-concatenation-plugin/
      "作用域提升(scope hoisting)",使代码体积更小[函数申明会产生大量代码](#webpack3)
    */
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
}

"scripts": {
    "build:dll": "webpack -p --progress --config build/webpack.dll.conf.js"
  }

执行npm run build:dll命令就可以在根目录下生成vendor-manifest.json,static/js下生成vendor.dll.js

  • 在webpack.base.conf.js中增加如下
const manifest = require('../vendor-manifest.json')

....

plugins: [
   //把dll的vendor-manifest.json引用到需要的预编译的依赖
   new webpack.DllReferencePlugin({
     manifest
   })
]
<script src="./static/js/vendor.dll.js"></script>

目前在项目中做的优化就是这些,还是那句话,性能优化的路没有穷尽,只有更快。

参考文章

(1)https://blog.csdn.net/blueber… (2)https://developers.google.com… (3)https://www.jeffjade.com/2017…

原文链接:https://segmentfault.com/a/1190000017867494

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50836.html

文章标题:webpack打包性能优化之路

相关文章
图片优化的那些工具
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、im...
2016-01-13
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
JS教程之基础
javascript教程之什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组...
2015-11-12
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
Ajax教程之Ajax介绍
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述...
2015-11-12
回到顶部