webpack相关

1 打包体积 优化思路

  • 提取第三方库或通过引用外部文件的方式引入第三方库
  • 代码压缩插件UglifyJsPlugin
  • 服务器启用gzip压缩
  • 按需加载资源文件 require.ensure
  • 优化devtool中的source-map
  • 剥离css文件,单独打包
  • 去除不必要插件,通常就是开发环境与生产环境用同一套配置文件导致

2 打包效率

  • 开发环境采用增量构建,启用热更新
  • 开发环境不做无意义的工作如提取css计算文件hash等
  • 配置devtool
  • 选择合适的loader
  • 个别loader开启cachebabel-loader
  • 第三方库采用引入方式
  • 提取公共代码
  • 优化构建时的搜索路径 指明需要构建目录及不需要构建目录
  • 模块化引入需要的部分

3 Loader

编写一个loader

loader就是一个node模块,它输出了一个函数。当某种资源需要用这个loader转换时,这个函数会被调用。并且,这个函数可以通过提供给它的this上下文访问Loader APIreverse-txt-loader

// 定义
module.exports = function(src) {
  //src是原文件内容(abcde),下面对内容进行处理,这里是反转
  var result = src.split('').reverse().join('');
  //返回JavaScript源码,必须是String或者Buffer
  return `module.exports = '${result}'`;
}
//使用
{
	test: /\.txt$/,
	use: [
		{
			'./path/reverse-txt-loader'
		}
	]
},

4 说一下webpack的一些plugin,怎么使用webpack对项目进行优化

构建优化

  • 减少编译体积 ContextReplacementPuginIgnorePluginbabel-plugin-importbabel-plugin-transform-runtime
  • 并行编译 happypackthread-loaderuglifyjsWebpackPlugin开启并行
  • 缓存 cache-loaderhard-source-webpack-pluginuglifyjsWebpackPlugin开启缓存、babel-loader开启缓存
  • 预编译 dllWebpackPlugin && DllReferencePluginauto-dll-webapck-plugin

性能优化

  • 减少编译体积 Tree-shakingScope Hositing
  • hash缓存 webpack-md5-plugin
  • 拆包 splitChunksPluginimport()require.ensure
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小码哥・Martin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值