webpack图片压缩-webpack配置css兼容性和压缩

我们一般打包, webpack 会自动把 css 打包到 js 文件中去。 css 抽取 就是是把 css 抽取出来,生成 css 文件单独打包,然后在进行压缩。

接下来,我详细介绍下 css 是如何抽取 和 压缩的!

去除不必要的插件

刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果。所以,如果你打包后的文件非常大的话,先检查下是不是包含了这些插件。

提取第三方库

像 react 这个库的核心代码就有 627 KB,这样和我们的源代码放在一起打包,体积肯定会很大。所以可以在 webpack 中设置

{

entry: {

bundle: 'app'

vendor: ['react']

}

plugins: {

new ('vendor', '')

}

}

这样打包之后就会多出一个 文件,之后在引入我们自己的代码之前,都要先引入这个文件。比如在 中

<script src="/build/"></script>

<script src="/build/"></script>

除了这种方式之外,还可以通过引用外部文件的方式引入第三方库,比如像下面的配置

{

externals: {

'react': 'React'

}

}

externals 对象的 key 是给 require 时用的,比如 require('react'),对象的 value 表示的是如何在 global 中访问到该对象,这里是 。这时候 就变成下面这样

<script src="//"></script>

<script src="/build/"></script>

当然,个人更推荐第一种方式。

代码压缩

webpack 自带了一个压缩插件 UglifyJsPlugin,只需要在配置文件中引入即可。

{

plugins: [

new ({

compress: {

warnings: false

}

})

]

}

加入了这个插件之后,编译的速度会明显变慢,所以一般只在生产环境启用。

另外,服务器端还可以开启 gzip 压缩,优化的效果更明显。

代码分割

什么是代码分割呢?我们知道,一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说,我们更想要的是只加载当前 UI 的代码,没有点击的部分不加载。

看起来好像挺麻烦,但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。

code split 是不支持 ES6 的模块系统的,所以在导入和导出的时候千万要注意,特别是导出。如果你导出组件的时候用 ES6 的方式,这时候不管导入是用 CommomJs 还是 AMD,都会失败,而且还不会报错!

当然会踩到这个坑也是因为我刚刚才用 NodeJS,而且一入门就是用 ES6 的风格。除了这个之外,还有一点也要注意,在生产环境的 webpack 配置文件中,要加上 publicPath

output: {

path: xxx,

publicPath: yyy,

filename: ''

}

不然的话,webpack 在加载 chunk 的时候,路径会出错。

设置缓存

开始这个小节之前,可以先看下大神的一篇文章:大公司里怎样开发和部署前端代码。

对于静态文件,第一次获取之后,文件内容没改变的话,浏览器直接读取缓存文件即可。那如果缓存设置过长,文件要更新怎么办呢?嗯,以文件内容的 MD5 作为文件名就是一个不错的解决方案。来看下用 webpack 应该怎样实现

output: {

path: xxx,

publicPath: yyy,

filename: '[name]-[chunkhash:6].js'

}

打包后的文件名加入了 hash 值

const bundler = webpack(config)

((err, stats) => {

let assets = ().assets

let name

for (let i = 0; i < ; i++) {

if (assets[i].('main')) {

name = assets[i].name

break

}

}

(, (err, stats) => {

if (err) {

()

}

writeTemplate(name)

})

})

手动调用 webpack 的 API,获取打包后的文件名,通过 writeTemplate 更新 html 代码。完整代码猛戳 gitst。

第一步:需要安装 postcss , postcss-loader 和 postcss-preset-env 三个包。

第二步:在 的 css 的 loader 里配置 postcss-loader 。

第三步:配置 ,然后配置 postcss-preset-env 插件,用来读取 文件中的 browserslist 配置。

第四步:在 文件添加 browserslist ,配置需要支持哪些浏览器。

压缩 css 需要用到 optimize-css-assets-webpack-plugin 。

用法很简单,引入插件之后,在 plugins 中实例化即可。