webpack构建打包的性能优化实战指南

目录
  • 前言
  • 一、优化打包构建速度,提升开发体验和效率
    • 1.1优化babel-loader
    • 1.2IgnorePlugin,避免引入无用模块
    • 1.3noParse避免重复模块化解析
    • 1.4happyPack多进程打包
    • 1.5ParallelUglifyPlugin多进程压缩js
    • 1.6热更新
    • 1.7DllPlugin动态链接库插件
  • 二、webpack性能优化-产出代码
  • 总结

前言

开发的时候,如果每次我们修改了文件,webpack都能很迅速地帮我们编译完构建完而且浏览器能保存状态更新内容,体验会比较好;优化产出代码,减小体积,设置hash,可以提升生产环境上网页的加载速度

一、优化打包构建速度,提升开发体验和效率

1.1 优化babel-loader

开启缓存,只要是es6代码没有改动的部分,下次重新构建的时候可以使用缓存,不被重新编译。

    rules: [
        {
            test: /\.js$/,
            loader: ['babel-loader?cacheDirectory'],
            include: srcPath, //设置include或者exclude的范围,限定需要编译文件的目录范围
            //exclude: /node_modules/
        }
    ]

1.2 IgnorePlugin,避免引入无用模块

比如有些库包含多个国家的语言包(moment.js),我们只需要中文包或者英文报,所以我们需要避免引入不需要的语言包,

    plugins: [
        //忽略moment下的/locale目录,再手动import locale内部我们需要使用到的语言包
        new webpack.IgnorePlugin(/\.\/local/,/moment/)
    ]

1.3 noParse 避免重复模块化解析

代码中如果有xx.min.js之类的文件,基本已经采用模块化处理过的,无需在对类似文件进行递归解析处理,会引入进项目

module: {
    noParse: [/xx\.min\.js$/]
}

1.4 happyPack 多进程打包

开启多进程打包,提高构建速度

rules: [
    {
        test: /\.js$/,
        //把对.js文件的处理转交给id为babel的HappyPack实例
        use: ['happypack/loader?id=babel'],
        include: srcPath
    }
],
plugins: [
    new HappyPack({
        //用唯一的标识符id来代表当前的HappyPack是用来处理一类特定的文件
        id: 'babel',
        //如何处理.js文件,用法和loader配置中一样
        loaders: ['babel-loader?cacheDirectory']
    })
]

1.5 ParallelUglifyPlugin多进程压缩js

在生产环境中使用,因为在开发环境下没有必要压缩js代码

plugins: [
    new ParallelUglifyPlugin({
        //还是使用的UglifyJs压缩,只不过帮助开启了多进程
        uglifyJS: {
            output: {
                beautify: false,//最紧凑的输出
                comments: false,//删除所有的注释
            },
            compress: {
                //删除所有的'console'语句,可以兼容ie浏览器
                drop_console: true,
                //内嵌定义了但只用到一次的变量
                collapse_vars: true,
                //提取出出现多次但是没定义成变量去引用的静态值
                reduce_vars: true
            }
        }
    })
]

1.6 热更新

改完代码,浏览器无需刷新,新代码生效,状态保留。

entry: {
    index: [
        'webpack-dev-server/client?http://localhost:8080/',
        'webpack/hot/dev-server',
        path.join(srcPath, 'index.js')
    ],
    other: path.join(srcPath, 'other.js')
}

plugins: [
    new HotModuleReplacementPlugin()
]

devServer: {
    xxx: 'xx'
    hot: true //开启热更新
}

配置完后,修改样式,热更新生效了,但修改js,热更新没有生效,接下来还需要在js中设置允许热更新监听的模块

if(module.hot){
    module.hot.accept(['xxx文件名'], () => {
        //在注册了热更新的js文件修改后,才会进行热更新
    })
}

1.7 DllPlugin动态链接库插件

前端框架如Vue、React,体积大,构建慢,比较稳定,不常升级版本。这种情况下,同一个版本只构建一次,不用每次都重新构建; 由于webpack已内置DllPlugin,所以不需我们额外安装插件,包含两个插件 DllPlugin(用来打包出dll文件,只要打包过,就不需要再打包了),DllReferencePlugin(使用dll文件)

//webpack.dll.js文件中的配置
mode: 'development',
entry: {
    //把react相关模块放到一个单独的动态链接库
    react: ['react','react-dom']
},
output: {
    //输出动态链接库的文件名称,[name]代表当前动态链接库的名称
    filename: '[name].dll.js',
    path: distPath,
    //存放动态链接库的全局变量名称,例如对应react来说就是 _dll_react
    //之所以在前面加上_dll_是为了防止全局变量冲突
    library: '_dll_[name]'
}
plugins: [
    new DllPlugin({
        //动态链接库的全局变量名称,需要和output.library中保持一致
        //该字段的值也就是输出的manifest.json文件中name字段的值
        name: '_dll_[name]',
        path: path.join(distPath, '[name].manifest.json')
    })
]

配置好webpack.dll.js后,在package.json文件中定义执行webpack.dll.js的命令

    "script": {
        "dll": "webpack --config build/webpack.dll.js"
    }

以上配置完执行dll打包命令打包后会产出react.dll.js和react.manifest.json文件,需要在项目中使用到打包后的react.dll.js

//在inde.html中
<script src="./react.dll.js"></script>
//在webpack.dev.js中
plugins: [
    new DllReferencePlugin({
        //描述react动态链接库的文件内容
        manifest: require(path.join(distPath, 'react.manifest.json'))
    })
]

二、webpack性能优化-产出代码

可以从体积更小;合理分包,不重复加载;速度更快、内存使用更少这几方面去进行优化

  • 2.1 小图片base64编码,使用url-loader,可减少网络请求
  • 2.2 bundle加hash,如果文件没有变,hash值不变,浏览器可以命中缓存
  • 2.3 提取公共代码,可以是整个项目的体积更小
  • 2.4 IngorePlugin 忽略库中不需要的包
  • 2.5使用cdn加速
output: {
    publicPath: 'http://cdn.xxx.com'//引用文件路径是,路径名前加cdn域名的前缀
}

打包后,将代码放入cdn域名对应的服务器中。

  • 2.6 使用production

mode为production时,打包后的代码会自动压缩,Vue/React会自动删掉调式代码(如开发环境的warning),也会自动启用Tree-Shaking,将未使用到的代码删掉

mode: "production"
  • 2.7 Scope Hosting

将多个函数合并到一个函数中,可以使代码体积更小,创建的函数作用域更少,代码可读性更好

module.exports = {
    resolve: {
        mainFields: ['jsnext: main','browser','main']
    },
    plugins: [
        //开启Scope Hosting
        new ModuleConcatenationPlugin()
    ]
}

总结

到此这篇关于webpack构建打包的性能优化的文章就介绍到这了,更多相关webpack构建打包性能优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • webpack4.0打包优化策略整理小结

    本文介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资料 当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件 从而缩小了loader加载搜索范围 高概率命中文件 module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除不处理的目录

  • webpack打包优化的几个方法总结

    为什么要优化打包? 项目越做越大,依赖包越来越多,打包文件太大 单页面应用首页白屏时间长,用户体验差 我们的目的 减小打包后的文件大小 首页按需引入文件 优化 webpack 打包时间 优化方式 1. 按需加载 1.1 路由组件按需加载 const router = [ { path: '/index', component: resolve => require.ensure([], () => resolve(require('@/components/index'))) }, { pat

  • vue webpack打包优化操作技巧

    临近春节,公司很多同事都提前回家过年,剩余人员根据禅道去修改bug,当bug修正完毕以后,我们需要重新打包给运维,上测试服给测试同事提测,但是由于项目本体比较庞大,所以打包时间太过漫长(二十五分钟以上:sob:),所以有了打包优化的想法(其实想法早就有了,但是因为平时工作计划比较充实,所以一直没有去完成这个工作),这次正好有时间,所以去重新考虑了这个问题! webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便.   webapck 把所有的静态资源都看做是一个

  • 浅谈Webpack打包优化技巧

    前端的打包工具从之前的browserify.grunt.gulp到现如今的rollup.webpack,涌现出了很多优秀的打包工具,而目前最火的无疑是webpack,无论是当前热门的框架还是工具库很多都选择了它作为打包工具,因此在开发中webpack作为打包工具是一个很好的选择.在最近的项目开发中我也用到了webpack,其中也碰到了不少优化方面的问题,这里总结一下webpack打包优化的一些细节和方法. 首先,这次项目用到的是vue的全家桶,在webpack的配置方面直接用的是 vue-cli

  • 浅谈 Webpack 如何处理图片(开发、打包、优化)

    从 webpack book 的 Loading Assets 一章中延申出来. 改善前端项目体验中,很重要的点就是静态资源的优化.它是由于浏览器客户端在同一时间针对同一 域名 的请求有一定资源限制.如果资源过多.过大就会使得页面卡顿. 静态资源中,又以图片最为典型.那么我们在开发中该如何处理图片呢? webpack 是前端较为常用的手脚架工具,本文以它为例. 主要分为 开发 . 打包 . 优化 三个方面来介绍 示例地址: webpack demo 开发 webpack 可以用使用url-loa

  • webpack构建打包的性能优化实战指南

    目录 前言 一.优化打包构建速度,提升开发体验和效率 1.1优化babel-loader 1.2IgnorePlugin,避免引入无用模块 1.3noParse避免重复模块化解析 1.4happyPack多进程打包 1.5ParallelUglifyPlugin多进程压缩js 1.6热更新 1.7DllPlugin动态链接库插件 二.webpack性能优化-产出代码 总结 前言 开发的时候,如果每次我们修改了文件,webpack都能很迅速地帮我们编译完构建完而且浏览器能保存状态更新内容,体验会比

  • 浅谈React + Webpack 构建打包优化

    本文介绍了React + Webpack 构建打包优化,分享给大家,具体如下: 使用 babel-react-optimize对 React 代码进行优化 检查没有使用的库,去除 import 引用 按需打包所用的类库,比如 lodash . echart 等 lodash 可以采用babel-plugin-lodash进行优化. 需要注意的是 在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这

  • JavaScript webpack模块打包器如何优化前端性能

    目录 一.webpack的使用背景 二.webpack如何优化 1. JS代码压缩 2.CSS代码压缩 3. HTML文件压缩 4. 文件大小压缩 5. 图片压缩 6. Tree Shaking 7. 代码分离 8. 内联chunk 9. 利用CDN加速以及提取公共第三方库 三.总结 一.webpack的使用背景 随着前端的项目逐渐扩大,必然会导致性能问题.尤其大大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面的卡顿甚至崩溃. 一般项目在完成后,会通过webpack进行打包,利

  • Django中prefetch_related()函数优化实战指南

    目录 前言 使用方法 *lookups 参数 Prefetch对象 最佳实践 选择哪个函数 小结 总结 前言 对于多对多字段(ManyToManyField)和一对多字段, 可以使用prefetch_related()来进行优化 prefetch_related()和select_related()的设计目的很相似,都是为了减少SQL查询的数量,但是实现的方式不一样.后者是通过JOIN语句,在SQL查询内解决问题.但是对于多对多关系,使用SQL语句解决就显得有些不太明智,因为JOIN得到的表将会

  • 浅谈Redis高并发缓存架构性能优化实战

    目录 场景1: 中小型公司Redis缓存架构以及线上问题实战 场景2: 大厂线上大规模商品缓存数据冷热分离实战 场景3: 基于DCL机制解决热点缓存并发重建问题实战 场景4: 突发性热点缓存重建导致系统压力暴增 场景5: 解决大规模缓存击穿导致线上数据库压力暴增 场景6: 黑客工资导致缓存穿透线上数据库宕机 场景7: 大V直播带货导致线上商品系统崩溃原因分析 场景8: Redis分布式锁解决缓存与数据库双写不一致问题实战 场景9: 大促压力暴增导致分布式锁串行争用问题优化 场景10: 利用多级缓

  • mpvue性能优化实战技巧(小结)

    最近一直在折腾mpvue写的微信小程序的性能优化,分享下实战的过程. 先上个优化前后的图: 可以看到打包后的代码量从813KB减少到387KB,Audits体验评分从B到A,效果还是比较明显的.其实这个指标说明不了什么,而且轻易就可以做到,更重要的是优化小程序运行过程中的卡顿感,请耐心往下看. 常规优化 常规的Web端优化方法在小程序中也是适用的,而且不可忽视. 一.压缩图片 这一步最简单,但是容易被忽视.在tiny上在线压缩,然后下载替换即可. 我这项目的压缩率高达72%,可以说打包后的代码从

  • webpack dll打包重复问题优化的解决

    关于webpack dll的使用,我这里不做过多介绍,网上都有,一撸一大把,今天我要说的是在使用dll plugin过程中出现的一个包依赖问题,这个问题导致打出来的包会包含重复的代码. 优化背景 最近在给公司项目优化的时候,由于 内部CDN上传文件大小限制了500K ,所以用了webpack dll来进行拆分打包,我将拆分的包分为三部分: vue生态包( vue . vuex . vue-router . vuex-class . vue-class-component 等周边生态的库) vue

  • 浅谈webpack 构建性能优化策略小结

    背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,React,Vue,Angular等诸多知名项目也都相继选用其作为官方构建工具,极受业内追捧.但是,随者工程开发的复杂程度和代码规模不断地增加,webpack暴露出来的各种性能问题也愈发明显,极大的影响着开发过程中的体验. 问题归纳 历经了多个web项目

  • 性能优化篇之Webpack构建速度优化的建议

    如何输出Webpack构建分析 输出Webpack构建信息的.json文件:webpack --profile --json > stats.json --profile:记录构建中的耗时信息 --json:以json格式输出构建结果,最后只输出一个json文件(包含所有的构建信息) web可视化查看构建分析:得到了webpack构建信息文件stats.json,如何进行很好的可视化查看? 方案一:通过可视化分析工具Webpack Analyse,是个在线Web应用,上传stats.json文件

  • 性能优化篇之Webpack构建代码质量压缩的建议

    Webpack构建速度优化基本优化完毕,接下来考虑的就是:线上代码质量的优化,即如何使用webpack构建出高质量的代码 Webpack构建流程:初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件 提纲 本次优化构建代码质量基本技术: reactRouter按需加载: 公共代码提取,以及代码压缩: CDN接入: 开启gzip压缩: 接入treeShaking,剔除无用代码 开启Scope Hoisting (生产环境

随机推荐