最全 webpak4.0 打包性能优化清单

最全 webpak4.0 打包性能优化清单

webpack4.0如何进行打包优化?

无非是从两个角度进行优化,其一:优化打包速度,其二:优化打包体积,送你一份打包性能优化清单

1.使用loader的时候尽量指定exclude和inlucde来提高文件查找效率,避免不必要的查找,设置noParse参数

module: {
    noParse: /jquery/, // 不去解析jquery中的依赖
    rules:[
        {
            test: /\.js?$/,
            use: [
                { loader: 'babel-loader' },
                {
                    // 自定义的同步处理loader
                    loader: 'replaceLoader',
                    options: {
                        name: 'hellonew'
                    }
                },
                {
                    // 自定义的异步处理loader
                    loader: 'asyncReplaceLoader',
                    options: {
                        name: 'myloader'
                    }
                }
            ],
            exclude: ['/node_modules'],
            include: [path.resolve(__dirname, '../src/asset/less/component/js')]
        }
    ]
},

2.对css公共的模块进行分离

const CssMiniExtreactPlugin = require('mini-css-extract-plugin')
// postcss自动给css3加上前缀
module{
    rules:[
        {
           test: /\.less?$/,
                // loader的执行顺序,从下到上,从右到左
                use: [
                    {
                        loader: CssMiniExtreactPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    {
                        // css-loader
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2 // import引入的less文件也执行less-loader
                            // modules: true
                            // minimize: true
                        }
                    },
                    'postcss-loader',
                    'less-loader'
                ]
        }
    ]
}
plugins:[
     new CssMiniExtreactPlugin({
            filename: 'css/[name]_[contenthash].css',
            chunkFilename: 'css/[name]_chunk_[contenthash].css'
     }),
],
optimization: {
    //拆分css,公共的使用过两次的chunk打包到common.css方便做缓存,单独的css每个页面打包一个针对当前的页面的css
    splitChunks: {
            name: true,
            cacheGroups: {
                // 打包公共的css
                styles: {
                    name: 'common',
                    test: /\.less$/,
                    chunks: 'all',
                    enforce: true,
                    minChunks: 2
                },
                // 打包每个页面的css
                fooStyles: {
                    name: 'index',
                    test: (m, c, entry = 'index') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                    chunks: 'all',
                    enforce: true
                },
                barStyles: {
                    name: 'detail',
                    test: (m, c, entry = 'detail') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                    chunks: 'all',
                    enforce: true
                },
            }
        }
    }
}                

3.拆分js,将公共的js拆分方便把相同的内容缓存下来

// 配置splitChunks
optimization: {
    splitChunks: {
        name: true,
        cacheGroups: {
            vendors: {
                chunks: 'async',
                name: 'verdon',
                test: /[\\/]node_modules[\\/]/,
                priority: -20,
                minSize: 0
                // filename: '[name].js'
            },
            default: {
                chunks: 'all',
                name: 'common',
                minChunks: 1,
                test: /[\\/]node_modules[\\/]/, // 配置打包哪里的文件
                priority: -10
                // reuseExistingChunk: true
            }
        }
    }
}

4.开启css,js和html压缩

//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
plugins:[
    new OptimizeCssAssetsWebpackPlugin()
]
//压缩js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
optimization: {
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true, // 并发压缩
            sourceMap: true // 开启sourcemap
        })
    ]
}
//压缩html
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
    new HtmlWebpackPlugin({
        hash: true,
        template: `./src/index.html`,
        filename: `index.html`,
        minify: {
            collapseWhitespace: true   //开启html压缩
        }
    })
]

5.使用tree shake把没有用到的js和css剔除掉

optimization: {
    usedExports: true, // 使用tree shake
}
//需要在package.json里面设置“sideEffect”进行配合使用
"sideEffects": [
    "*.css",           //移出css
    "@babel/polyfill"  //移除掉@babel/polyfill
],

6.善用alias,resolve里面有一个alias的配置项目,能够让开发者指定一些模块的引用路径。

// 省略后缀
resolve: {
     extensions: ['.js', '.vue', '.jsx', '.json'],
     // 定义别名
     alias: {
     '@component': utils.resolve('../src/component')
     }
},

7.使用prefetch预加载

// 异步加载
function dom() {
    return import(/* webpackPrefetch:true */ 'lodash').then(({ default: _ }) => {
        let div = $('<div>')
        div.html(_.join(['webpack', 'is', 'so', 'easy'], '***'))
        return div
    })
}

8.使用懒加载

//配置babel
npm install @babel/plugin-syntax-dynamic-import -D
//.babelrc文件配置如下
{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
//在项目中正常使用即可
const Foo = () => import('./Foo.vue')

9.使用DllPlugin使得第三方模块只打包分析一次

//生成一个webpack.dll.config.js文件,执行npm run dll
const utils = require('./utils')
const webpack = require('webpack')
module.exports = {
    mode: 'production',
    entry: {
        jquery: ['jquery'],
        lodash: ['lodash']
    },
    output: {
        path: utils.resolve('../dll'),
        filename: '[name].dll.js',
        library: '[name]' // 将打包的dll文件暴露一个公共的变量
    },
    plugins: [
        // 输出映射关系
        new webpack.DllPlugin({
            name: '[name]',
            path: utils.resolve('../dll/[name].manifest.json')
        })
    ]
}
//以下为webpack配置
new AddAssetWebpackPlugin({
    filepath: utils.resolve('../dll/jquery.dll.js')
}),
    new AddAssetWebpackPlugin({
    filepath: utils.resolve('../dll/lodash.dll.js')
}),
    new webpack.DllReferencePlugin({
    manifest: utils.resolve('../dll/jquery.manifest.json')
}),
    new webpack.DllReferencePlugin({
    manifest: utils.resolve('../dll/lodash.manifest.json')
})

10.使用happyPack进行多线程打包,提升打包效率

//npm install happypack -D
const Happypack = require('happypack') // 多线程打包,提高打包速度
let os = require('os')
let happyThreadPool = Happypack.ThreadPool({ size: os.cpus().length })

//webpack.config.js配置
rules:[
    {
        test:/\.less?$/
        use:['happypack/loader?id=css']
    }
    {
         test: /\.js?$/,
         use: ['Happypack/loader?id=js'],
    }
]
plugins:[
    new Happypack({
       id:'css',
       use:['style-loader','css-loader','less-loader'],
       threadPool: happyThreadPool
    }),
    new Happypack({
        id: 'js',
        use: [
            { loader: 'babel-loader' },
            {
                loader: 'replaceLoader',
                options: {
                    name: 'hellonew'
                }
            },
            {
                loader: 'asyncReplaceLoader',
                options: {
                    name: 'wxl'
                }
            }
        ],
        threadPool: happyThreadPool
    })
]

11.对图片打包,适当采用base64位格式,如css sprite图片可以使用base64位格式

 rules:[
     {
         test: /\.(jpg|png|svg|gif)?$/,
         use: {
             // loader: 'file-loader',
             loader: 'url-loader', // url-loader把图片打包成base64格式了
             options: {
                 // placeholder
                 name: '[name]_[hash].[ext]',
                 outputPath: 'images/', // 将图片打包到指定的文件夹下
                 limit: 204800 // 小于限定尺寸图片就被打包到images目录下
             }
         }
     }
]

12.合理使用devtool参数,开发环境不建议使用cheap-module-source-map

devtool: 'cheap-module-source-map',  

13.使用image-webpack-loader压缩图片,适当设置压缩程度,以免造成图片失真

$ npm install image-webpack-loader --save-dev
 {
         loader: 'image-webpack-loader',
         options: {
             mozjpeg: {
                  progressive: true,
                  quality: 65
             },
             optipng: {
                  enabled: true
             },
             pngquant: {
                  quality: [0.65, 0.90],
                  speed: 4
             },
             gifsicle: {
                  interlaced: false
             },
             webp: {
                  quality: 75
             }
        }
}

原文地址:https://www.cnblogs.com/xinggood/p/11996921.html

时间: 2024-10-10 01:19:38

最全 webpak4.0 打包性能优化清单的相关文章

2017前端性能优化清单

https://github.com/Findow-team/Blog/issues/11?utm_source=tuicool&utm_medium=referral 2017前端性能优化清单 你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具?有没有用过Brotli.Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?

MySQL &#183; 8.0版本更新 &#183; 性能优化篇

摘要: 本文主要总结下MySQL在8.0版本和性能相关的一些改动,随着新的小版本的发布,本文将不断进行更新,直到正式GA. 已更新版本MySQL 8.0.0MySQL 8.0.0 WL#9387: InnoDB: Group purging of rows by table ID 这个问题最早是faceb... 本文主要总结下MySQL在8.0版本和性能相关的一些改动,随着新的小版本的发布,本文将不断进行更新,直到正式GA. MySQL 8.0.0 WL#9387: InnoDB: Group

Tomcat 7.0.x性能优化

Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选. 是目前的开发焦点.它在汲取了Tomcat 6.0.x优点的基础上,实现了对于Servlet 3.0.JSP 2.2和EL 2.2等特性的支持.除此以外的改进列表如下: · Web应用内存溢出侦测和预防 · 增强了管理程序和服务器管理程序的安全性 · 一般 CSRF保护 · 支持web应用中的外部内容的直接引用 · 重构 (c

webpack打包性能优化

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

MySQL的性能优化

索引的存储结构 l B Tree和B+ Tree的特点与区别 * 树的高度一般都是在2-4这个高度,树的高度直接影响IO读写的次数. * 如果是三层树结构---支撑的数据可以达到20G,如果是四层树结构---支撑的数据可以达到几十T *  B Tree和B+ Tree的最大区别在于非叶子节点是否存储数据的问题.B Tree是非叶子节点和叶子节点都会存储数据.而B+ Tree只有叶子节点才会存储数据,而且存储的数据都是在一行上,而且这些数据都是有指针指向的,也就是由顺序的. l 非聚集索引 * 叶

C#实用杂记-EF全性能优化技巧

原文链接:http://www.makmong.com/947.html#comment-31 EntityFramework 优化建议 2016年1月15日 下午4:54 LEILINKANG Entity Framework目前最新版本是6.1.3,当然Entity Framework 7 目前还是预览版,并不能投入正式生产环境,估计正式版16年第一季度会出来,了解过EF7的部分新特性后,还是狠狠期待一下滴. EF性能问题一直为开发者所诟病,最让人纠结的也是这块,所以此次我也来谈谈EF的性能

【朝花夕拾】Android性能优化篇之(四)Apk打包

前言 APK,即Android Package,是将android程序和资源整合在一起,形成的一个.apk文件.相信所有的Android程序员是在IDE的帮助下,完成打包轻而易举,但对打包流程真正清楚的可能并不多.本章的内容比较简单,也是非常基础的内容,但是对理解android应用的结构却有很大的帮助.笔者写这篇文章的目的,一方面是为了弥补这方面的盲点,回顾和梳理apk打包方面的理论知识点:第二方面,是为了给后续写Android虚拟机知识做铺垫,进而去研究android的性能优化,这也是把这篇文

使用EntityFrameWork 5.0面向存储过程(&amp;执行Sql,性能优化)

EntityFrameWork5.0简单使用 概要: 使用EntityFrameWork5.0执行存储过程,Sql语句(DDL/DML)以及一点关于优化性能的方面; 正文: 在myef.tt下会包含需要展示数据的存储过程(select) 模型浏览器如下, 1.EF如何调用存储过程: Note:数据库的表对应的实体,以类对象表示,在EF容器下可以直接操作,比如db.UserAccount直接拿到UserAccount实体对象,存储过程,视图也是同样道理,也是可以通过EF上下文容器得到; 2.EF执

Android性能优化全方面解析

目的 公司的新需求终于解决完了,离测试和发布还有段时间,第一次体验了下没需求没bug的感觉,真是舒爽~然后翻了翻有什么可以学的.无意翻到了Android后期发展的五大趋势.一.性能优化.二.高级UI.三.JNI/NDK开发.四.架构师.五.RN开发.这也许将会是我的进阶趋势.早已知道在瓶颈期的我,似乎看到了突破的希望的.初级进阶中级也好,中级进阶高级也罢,现在的市场无非是根据经验规定的,根据能力的少之又少. 其实,关注我的或者在群里的小伙伴也知道,UI那块我问题不大.但是高级UI就有难度了.我们