游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    020-85534346

    电子邮件

    81058337@qq.com
  • 码云社APP

    随时掌握码云社动态

  • 扫描二维码

    关注砺锋微信公众号

让你的Webpack起飞

发布时期:2019-4-3 15:08
阅读:1134 回复:20

最近看到了美团的前端团队的一篇文章,文中提到前端发布仅需10秒,默默的看了一下我们自己的发布时间。。。先定一个小目标,争取把Webpack的打包时间优化到10秒以内吧。先看一下现在打包一次需要的时间,71164ms,下 ...

最近看到了美团的前端团队的一篇文章,文中提到前端发布仅需10秒,默默的看了一下我们自己的发布时间。。。

先定一个小目标,争取把 Webpack 的打包时间优化到10秒以内吧。

让你的Webpack起飞

先看一下现在打包一次需要的时间,71164ms,下面开始一步一步见证奇迹:

0. 性能分析

0.1 可视化分析

有很多工具提供了可视化的分析,如Webpack-bundle-analyzer、webpack-chart、 webpack-analyse。 以Webpack-bundle-analyzer为例,它提供了一个下图所示的图表,展示了引入的所有模块的大小、路径等信息,可以针对性的做出优化。

让你的Webpack起飞

使用上也很简单:

// 安装:
npm install webpack-bundle-analyzer --save-dev
// webpack.config.js 配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8888,
reportFilename: 'report.html',
defaultSizes: 'parsed',
openAnalyzer: true,
generateStatsFile: false,
statsFilename: 'stats.json',
logLevel: 'info'
})
]

运行webpack命令,会自动在浏览器中打开http://127.0.0.1:8888/页面,展示可视化图表。

0.2 慢在哪里

我们可以使用 Speed Measure Plugin 来对打包过程中消耗的时间进行精确的统计,如图所示:

让你的Webpack起飞

使用方式如下:

npm install speed-measure-webpack-plugin --save-dev
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({
plugins: [
new MyPlugin(),
new MyOtherPlugin()
]
});

1. 升级到 Weback4.x

Webpack4 带来了极大的性能提升,按照开发者博客中的说法,构建速度最多甚至有高达98%的提升。

升级过程中遇到了一些网上的“Webpack4升级指南”等文章中没有列出的问题,在此分享一下:

1.1 升级 Vue-loader

Vue-loader 目前最新版本为 v15.3.0,使用方式有了很大不同。 现在,我们需要引入一个新的插件 VueLoaderPlugin ,具体使用方式如下:

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugins: [
new VueLoaderPlugin()
]
}

同时,在 v15版本的 vue-loader 中,不再需要单独为 .vue 组件中的模板、CSS等内容单独配置 loader,可以共用普通文件的配置,如下所示:

// webpack.config.js
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
// 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `
Huangluo大头(未知职业)-本文作者
这个人很懒,什么也没有留下。
1134 20 2019-4-3 15:08
该文章已有20人参与评论

请发表评论

全部评论

查看全部评论>>

扫一扫关注官方微信号

一手信息资讯权掌握尽在码云社

滚动新闻
CODESEEDING(码云社)一家致力于程序员成长、以内容为核心、以提问为引导的多元化成长社区。我们在线上为技术爱好者提供了一个优质的交流氛围环境,在线下同样和众多高校联合开办了技术沙龙品牌。
020-85534346
关注我们
  • 访问移动H5版
  • 官方微信公众号

码云社 - CODESEEDING 2.0© 2018-2019 码云社. TOOBUG ( 粤ICP备16114193号-3 )