webpack 打包优化

栏目: JavaScript · 发布时间: 6年前

内容简介:最后修改router.js,将所有路由都改为动态加载新增webpack.dll.conf.js 文件 Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。
webpack 打包优化
webpack 打包优化
webpack 打包优化

2. router 按需加载

最后修改router.js,将所有路由都改为动态加载

//router.js

//原来的写法:import Home from '@/components/PC/Home'
//改成下面这种形式(其他路由同理)
const Home = () => import('@/components/PC/Home') 

复制代码
webpack 打包优化
webpack 打包优化
webpack 打包优化

3.添加dll

新增webpack.dll.conf.js 文件 Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。

App部分代码修改后,只需要编译app部分的代码,dll部分,只要包含的库没有增减、升级,就不需要重新打包。这样也大大提高了每次编译的速度。

假设你有多个项目,使用了相同的一些依赖库,它们就可以共用一个dll

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    mode: 'none',
    entry: {
        vue: ['vue/dist/vue.js', 'vue', 'vue-router', 'vuex'],
        comment: ['jquery', 'lodash', 'jquery/dist/jquery.js']
    },
    output: {
        path: path.join(__dirname, '../static/dll/'),
        filename: '[name].dll.js',
        library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, '../static/dll/', '[name]-manifest.json'),
            name: '[name]'
        })
    ],
    optimization: {
        minimizer: [
            new UglifyJsPlugin()
        ]
    }
};

复制代码

执行命令,生产dll json webpack --config config/webpack.dll.conf.js

util.js plugins 添加

new webpack.DllReferencePlugin({
            manifest: require('../static/dll/vue-manifest.json')
        }),

        new webpack.DllReferencePlugin({
            manifest: require('../static/dll/comment-manifest.json')
        })

复制代码

index.html 添加文件连接

<script src="/static/dll/vue.dll.js"></script>
        <script src="/static/dll/comment.dll.js"></script>

复制代码
webpack 打包优化
webpack 打包优化
webpack 打包优化
webpack 打包优化

4.添加SplitChunksPlugin

提取node_modules 初始化模块,并设置缓存

optimization: {
        splitChunks: {
            chunks: 'all',
            minChunks: 3,
            cacheGroups: {
                vendor: {
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vendor',
                    priority: 10,
                    enforce: true
                }
            }
        }
    },

复制代码
webpack 打包优化
webpack 打包优化
webpack 打包优化

5.提取css

{
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }

复制代码
new MiniCssExtractPlugin({
            filename: isBuild? 'css/[name].css':'css/[name]_[hash].css'
        })

复制代码
webpack 打包优化
webpack 打包优化
webpack 打包优化
webpack 打包优化

5.提取element ui

element: {
                    test: /node_modules\/element-ui/,
                    chunks: 'initial',
                    name: 'element',
                    priority: 10,
                    enforce: true
                },

复制代码
new HtmlWebpackPlugin({
            template: './pages/index.html',
            chunks: ['vendor', 'app', 'element']
        })

复制代码
webpack 打包优化
webpack 打包优化
webpack 打包优化
webpack 打包优化

6.按需加载babel-polyfill

babel-polyfill的缺点 使用后打包后的体积很大,因为babel-polyfill是一个整体,把所有方法都加到原型链上。比如我们只使用了Array.from,但它把Object.defineProperty也给加上了,这就是一种浪费了。 使用@babel/runtime和@babel/plugin-transform-runtime 用插件后,Babel就会使用babel@runtime下的 工具 函数,将Promise重写成_Promise(只是打比方),然后引入_Promise helper函数。这样就避免了重复打包代码和手动引入模块的痛苦。

.babel

"plugins": [
      "@babel/plugin-transform-runtime"
    ]

复制代码

polyfills.js 删除babel-polyfill

//import 'babel-polyfill';
//import "core-js/modules/es6.promise";

复制代码
webpack 打包优化
webpack 打包优化

总结

webpack 打包优化
webpack 打包优化

app.js 1.78M -> 125k 体积减小 90%

vendor.js 324k -> 208k 体积减小 35%

由之前的3个包 拆分打包成多个 ,按需加载。

速度篇

building modules chunk asset optimization

之前是 60s-70s 体积优化后稳定在 40-50s(稳定在45s左右) 提升速度 20% 左右

1.使用 webpack-parallel-uglify-plugin 插件来压缩代码

当 Webpack 有多个 JavaScript 文件需要输出和压缩时,原本会使用 UglifyJS 去一个个挨着压缩再输出, 但是 ParallelUglifyPlugin 则会开启多个子进程,把对多个文件的压缩工作分配给多个子进程去完成

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

 new ParallelUglifyPlugin({
                uglifyOptions: {
                    // 最紧凑的输出
                    beautify: false,
                    // 删除所有的注释
                    comments: false,
                    compress: {
                        warnings: false, // 警告开关
                        drop_console: true,
                        // 内嵌定义了但是只用到一次的变量
                        collapse_vars: true,
                        // 提取出出现多次但是没有定义成变量去引用的静态值
                        reduce_vars: true
                    }
                },
                sourceMap: false,
                parallel: true , // 并行处理打包文件
                cache: true // 使用缓存

            })

复制代码
webpack 打包优化

[34.463, 38.368, 37.928, 36.127, 38.007] 平均 36.9786 36s 缩短 添加后稳定在 30-40s 大约10s

2.用 Happypack 来加速代码构建

happypack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程

new HappyPack({
            id: 'babel',
            loaders: [
                {
                    loader: 'babel-loader',
                    query: '?cacheDirectory',
                    options: {
                        presets: ['@babel/env']
                    }
                }],
            threadPool: happyThreadPool,
            verbose: true
        }),

复制代码
{
            test: /\.js$/,
            include: [srcPath, iqiyiPath],
            exclude: /(node_modules|bower_components)/,
            loader: 'happypack/loader?id=babel'
        },

复制代码

[35.357, 37.762, 44.798, 33.635, 33.427, 33.473, 32.468] 均值 35.845

new HappyPack({
            id: 'vue-loader',
            loaders: ['vue-loader'],
            threadPool: happyThreadPool,
            verbose: true
        })

复制代码
{
            test: /\.vue$/,
            include: srcPath,
            loader: 'happypack/loader?id=vue-loader'
        },

复制代码

[37.683, 39.648, 35.499, 35.108, 37.419, 35.862] 均值 36.869

new HappyPack({
            id: 'css-loader',
            loaders: ['css-loader'],
            threadPool: happyThreadPool,
            verbose: true
        })

复制代码
{
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                //'css-loader'
                'happypack/loader?id=css-loader'
            ]
        }

复制代码

[ 39.394, 39.443, 35.080, 37.253 ,37.501, 35.632] 均值 37.383

webpack 打包优化

[35.639, 36.382, 34.144, 33.420, 34.641, 32.504, 34.313] 34.434 速度稳定在30-35之间,缩短大约 1-2s

3.添加babel cacheDirectory

webpack 打包优化
webpack 打包优化

4.devtool

devtool: 'source-map' 构建速度: 25.133, 26.545, 25.956, 24.763, 26.953 ~ 25.869 重新构建速度: 1.387, 1.632 ,1.872, 1.809, 0.932 ~ 1.526

devtool 构建速度 重新构建速度 生产环境 品质(quality)
eval 21.473 +++ 0.6822 +++ no 生成后的代码
cheap-eval-source-map 23.251 + 0.8622 ++ no 转换过的代码(仅限行)
cheap-module-eval-source-map 24.9536 o 1.124 ++ no 原始源代码(仅限行)
eval-source-map 24.161 -- 0.9534 + no 原始源代码
webpack 打包优化

总结

最终打包速度从 60-70 降低到 30-35s 降低大约 20-25s 左右 提升速度大约 30% 左右 开发速度 二次打包速度 从 2.7~2.9s 左右降低到 0.6~0.9s,大约提速2s ,提速 60%-70% 左右 devtoo:eval

左右降低到 0.8~1.3s, 平均1.124,大约提速1s ,提速 35% 左右 devtoo:cheap-module-eval-source-map


以上所述就是小编给大家介绍的《webpack 打包优化》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

SOA & Web 2.0 -- 新商业语言

SOA & Web 2.0 -- 新商业语言

(美)Sandy Carter / 袁月杨、麻丽莉 / 清华大学出版社 / 2007 / 29.80元

在《SOA&Web 2.0:新商业语言》中,Sandy Calter示范了将企业解构为“组件化”业务模式的方法,然后用相互连接的、可重复的并且能快速、轻松、经济地适应各种变化的IT服务来支持该模式。这些技术将帮助IT专家和业务经理达到崭新的运营水平,以开展着眼于市场的创新,这才是最重要的。总而言之,企业必须实现灵活应对。直到最近,技术都一直阻碍着这些目标的实现。正是由于面向服务架构(SOA)、We......一起来看看 《SOA & Web 2.0 -- 新商业语言》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器