Webpack打包效率优化篇

Webpack基础配置:

语法解析:babel-loader

样式解析:style-loader

css解析:css-loader

less解析:less-loader

文件解析:url-loader(file-loalder)

性能分析:webpack-bundle-analyzer

代码:

var path = require(‘path‘);
var BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
module.exports = {
    mode: "development",
    entry: ‘./app.js‘,
    output: {
        path: path.resolve(__dirname, ‘./build/‘),
        filename: "source.js",
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: ‘babel-loader‘,
                }
            },
            {
                test: /\.css$/,
                use: [
                    ‘style-loader‘,
                    ‘css-loader‘
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                use: [
                    {
                        loader: ‘url-loader‘,
                        options: {
                            limit: 1000 * 100
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",  // creates style nodes from JS strings
                    ‘css-loader‘,    // translates CSS into CommonJS
                    ‘less-loader‘,     // compiles Less to CSS
                ]
            },
        ]
    },
    plugins: [
        new BundleAnalyzerPlugin()
    ]
}

打包结果:

性能图:

构建时间:8.506s

这里分析打包结果问题有哪些:

1.样式文件没有剥离出来

2.node_modules被打进来了

3.第三方打包体积过大react,react-dom

4.文件大小没处理,没有经过压缩

好了针对以上几个问题,我们重新配置webpack

1.剥离node_modules

rules: [
            {
                test: /\.js$/,
                use: {
                    loader: ‘babel-loader‘,
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // ‘style-loader‘,// 与 MiniCssExtractPlugin.loader 冲突
                    ‘css-loader‘
                ],
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // "style-loader",  // creates style nodes from JS strings
                    ‘css-loader‘,    // translates CSS into CommonJS
                    ‘less-loader‘,     // compiles Less to CSS
                ],
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                use: [
                    {
                        loader: ‘url-loader‘,
                        options: {
                            limit: 1000 * 100
                        }
                    }
                ],
                exclude: /node_modules/
            }
        ]

构建结果:

构建时间由8.506s变成1.251s

2.剥离js与css,less文件

webpack4.X版本已经使用最新API mini-css-extract-plugin ,原来的extract-text-webpack-plugin在node版本为10.X以后已经失效了。

引入plugin

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

配置loader

{
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // ‘style-loader‘,// 与 MiniCssExtractPlugin.loader 冲突
                    ‘css-loader‘
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // "style-loader",  // creates style nodes from JS strings
                    ‘css-loader‘,    // translates CSS into CommonJS
                    ‘less-loader‘,     // compiles Less to CSS
                ]
            },

配置plugin

/**
         *  剥离CSS文件
         */
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash:8].css",
            chunkFilename: "[id].css"
        }),
        /**
         *  动态引入css,less,js等文件
         */
        new HtmlWebpackPlugin({
            title: ‘webpack‘,
            template: ‘./index.html‘
        }),

重新build

构建时间有1.251s变成1.391s这里剥离文件导致构建时间增加,但是我们可以看到生成的目标js体积由987K变成了886K

3.分离第三方类库 DllPlugin 和 DllReferencePlugin

首先创建webpack.dll.config.js

const webpack = require(‘webpack‘);
const path = require(‘path‘);

module.exports = {
    entry: {
        react: [
            ‘react‘,
            ‘react-dom‘
        ]
    },
    output: {
        filename: ‘[name].dll.js‘,
        path: path.resolve(‘distDll/dll‘),
        library: ‘[name]_dll_[hash]‘
    },
    plugins: [
        new webpack.DllPlugin({
            name: ‘[name]_dll_[hash]‘,
            path: path.join(__dirname, ‘distDll/dll‘, ‘[name].manifest.json‘)
        })
    ]
}

在webpack.dev.js中增加

/**
         * 动态引入manifest.json
         */
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require(‘./distDll/dll/react.manifest.json‘)
        }),

构建结果

构建时间1.391s变成1.008s 目标体积由886K变成了9.92K

4.利用缓存加速二次构建

/**
         * 缓存加速二次构建速度
         */
        new HardSourceWebpackPlugin({
            cacheDirectory: ‘node_modules/.cache/hard-source/[confighash]‘,
            configHash: function (webpackConfig) {
                // node-object-hash on npm can be used to build this.
                return require(‘node-object-hash‘)({ sort: false }).hash(webpackConfig);
            },
            environmentHash: {
                root: process.cwd(),
                directories: [],
                files: [‘package-lock.json‘, ‘yarn.lock‘],
            },
            info: {
                // ‘none‘ or ‘test‘.
                mode: ‘none‘,
                // ‘debug‘, ‘log‘, ‘info‘, ‘warn‘, or ‘error‘.
                level: ‘debug‘,
            },
            cachePrune: {
                maxAge: 2 * 24 * 60 * 60 * 1000,
                sizeThreshold: 50 * 1024 * 1024
            },
        }),

构建结果:

可以看到有写入缓存的过程。这里代码体积过小,没看到加速效果,如果实际项目中,可以看到时间的缩小的效果

 5.利用scope histing (变量提升) 减少代码闭包形成

这里我使用了两个测试文件,a.js与b.js 其中b.js中引入了a.js

    /**
         * 开启 Scope Hoisting
         */
        new webpack.optimize.ModuleConcatenationPlugin(),

配置前的效果:

可以清晰的看到打包之后的代码分别对a.js与b.js生成了两个闭包函数(闭包函数的副作用这里就不多说了,占内存)

build出的文件大小9.92K

配置后的效果:

可以看到效果已经没有了针对两个两个js的闭包代码块

我们可以看到目标文件大小由9.92K变成了8.98K

6.Tree shaking 删除没用的函数或者变量

在.babelrc文件中设置modules:false,其实webpack4中已经默认实现了tree shaking。

  /*
      tree shaking.
    */
    ["env", {
      "modules": false
    }],

我们在代码中加入一个无效函数

var treeShaking = function () {
    console.log(‘tree shaking.‘);
    return;
    function unused() {
        return ‘unused‘;
    };
}

treeShaking();

这里需要修改build模式更改为生产环境(production)而不是开发环境(development)

效果:

可以看到已经消除了unused函数。

7.压缩图片文件大小

   {
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                use: [
                    ‘url-loader‘,
                    {
                        loader: ‘image-webpack-loader‘,
                        // options: {
                        //     limit: 1000 * 100    //不加限制图片过大会直接打到build下 导致找不到图片文件
                        // }
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: ‘65-90‘,
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ],
                exclude: /node_modules/
            }

压缩后的效果:

由压缩前的79.6K变成了72.5K

最终build出的效果图

可以看到已经压缩到了很小。

以上关于webpack的优化先总结到这里,后续继续更新。

github地址:https://github.com/Dqhan/Webpack

原文地址:https://www.cnblogs.com/moran1992/p/11233419.html

时间: 2024-10-25 06:05:54

Webpack打包效率优化篇的相关文章

webpack打包体积优化

webpack打包的体积越小,对于部署应用的网站来说,性能越好,加载速度越快. 1. 分析打包文件 1. 生成统计信息文件 首先需要通过webpack命令生成统计信息的文件.在package.json的脚本中添加命令 "scripts": { "stats": "webpack --config webpack.prod.js --profile --json > stats.json", //... } 上面的命令会在根目录下生成一个st

webpack打包性能优化

1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebpackPlugin = require('compression-webpack-plugin'); // 在 pligins 中添加 new CompressionWebpackPlugin({ //gzip 压缩 asset: '\[path\].gz\[query\]', algorithm:

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

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W

Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W

性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看器)== == 介绍1:webpack-bundle-analyzer(可视化)== 将捆绑内容表示为方便的交互式可缩放树形图 如下效果图: 模块功能: 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大的大小 找到错误的模块 优化它! 最好的事情是它支持缩小捆绑!它解析它们以获得实际大小的

漫游Kafka设计篇之效率优化

原文地址:http://blog.csdn.net/honglei915/article/details/37564757 Kafka在提高效率方面做了很大努力.Kafka的一个主要使用场景是处理网站活动日志,吞吐量是非常大的,每个页面都会产生好多次写操作.读方面,假设每个消息只被消费一次,读的量的也是很大的,Kafka也尽量使读的操作更轻量化. 我们之前讨论了磁盘的性能问题,线性读写的情况下影响磁盘性能问题大约有两个方面:太多的琐碎的I/O操作和太多的字节拷贝.I/O问题发生在客户端和服务端之

基于CommonsChunkPlugin,webpack打包优化

前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.但是打包的文件还是很大,特别是通过CommonsChunkPlugin的async:true打包的chunk的公共包不可控.今天就通过CommonsChunkPlugin插件的理解,来优化这个问题 问题描述详细些,我们的打包是基于router进行的chunk分割,比如router有10个,router1,router2用到了ec

webpack打包优化并开启gzip

应用场景:项目使用webpack2.x进行打包,打包后静态资源通过nginx转发配置: 问题:webpack打包后的资源文件特别,特别大,没打包之前页面一个页面js有2M左右(其中已经抽离了css)? 优化一:一看js这么大肯定是没有关闭source-map,先将webpack配置文件中dev-tool:false, 优化二:使用compresion-webpack-plugin插件将静态资源压缩,并生成.gz文件,配置如下: 具体用法请参照:http://www.css88.com/doc/w

(webpack系列二)webpack打包优化探索

虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条原则永远是一切优化的前提 优化配置 升级webpack 3,优化js的编译能力(Scope Hoisting) 1// 主要配置2plugins:[3  new webpack.optimize.ModuleConcatenationPlugin()4] 合理规划 entry 入口配置(平衡vend