webpack性能优化之一

一、性能分析

1. 可视化分析

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

使用:

// 安装
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'
  })
]

在 项目的 package.json 文件中注入如下命令,以方便运行她(npm run analyz),默认会打开http://127.0.0.1:8888作为展示。

2. 慢在哪里

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

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()
    ]
});

webpack性能优化之一_第2张图片

webpack4

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

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

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` 文件中的 `
                    
                    

你可能感兴趣的:(webpack)