优化前
webpack配置了两个入口，一个是app.js，一个是vendors（包括 react 等第三方插件）。打包生成的JS文件对应有两个：app-[hash].js和vendors.js。
这种情况下，样式文件都被打包到了 app-[hash].js里面。而且这时候我们还没有做按需加载，所以这个文件会比较大，网页初次加载的时候花的时间很长。
优化后
使用插件 extract-text-webpack-plugin把样式从JS文件中分离出来，生成一个单独的CSS文件（竟然快1Mb了...），再引入到 HTML 中。打开页面的时候，app-[hash].js，vendors.js和这个CSS文件会被异步加载，节省时间。
优化过程
首先安装插件：
npm install --save-dev extract-text-webpack-plugin
修改 webpack 配置文件，先添加plugin：
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
... ...
plugins: [
... ...
new ExtractTextPlugin({ //样式文件单独打包
filename: "app.css", //指定生成的文件名称
disable: false, //是否禁用此插件
allChunks: true
})
],
}
注意，如果是 Django 项目，样式名称需要跟打包生成的其中一个模块名一样，这样才能在 templates中引入。比如这里我们命名为app.css。
然后修改CSS和LESS文件的loader：
module: {
rules:[
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader', 'postcss-loader'],
})
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader', 'less-loader'],
})
},
... ...
] // add all common loaders here
},
这是 Webpack 2 的配置了。Webpack 1 的 loader 格式跟上面的有一点区别。
配置修改完成了，再打包就会出现一个 app.css的文件。
接下来只需要在HTML头部引入（如果不在意引入css的位置可以忽略以下的步骤）。
我们后端使用的Django框架，所以需要在templates中引入。
修改前的 template：
{% load render_bundle from webpack_loader %}
<!doctype html>
<html lang="en">
<head>
......
</head>
<body>
......
{% render_bundle 'vendors' %}
{% render_bundle 'app' %}
</body>
</html>
修改后：
{% load render_bundle from webpack_loader %}
<!doctype html>
<html lang="en">
<head>
{% render_bundle 'app' 'css' %}
</head>
<body>
<div id="app"></div>
{% render_bundle 'vendors' %}
{% render_bundle 'app' 'js' %}
</body>
</html>
具体修改：先指定在<body>中只引入app bundle 的 js 文件：
{% render_bundle 'app' 'js' %}
然后在head中引入app bundle对应的 css 文件：
{% render_bundle 'app' 'css' %}
到这就ok了。
在django-webpack-loader的使用说明中写到了这个用法：
render_bundlewill render the proper<script>and<link>tags needed in your template.
render_bundlealso takes a second argument which can be a file extension to match. This is useful when you want to render different types for files in separately.
也就是说， render_bundle会在template中生成与bundle对应的 js 和 css 文件的 <script>和 <link> 标签。
而第二个可选参数用于指定引入的文件类型，如果不指定的话，默认两个都会在指定位置生成。比如在分离CSS文件之后，如果不修改templates，生成的HTML部分如下图：
不指定文件类型参数时，在<body>末尾引入
踩过的坑
- 注意CSS文件的名称
在这种情况下，只能是app.css或vendors.css。也就是必须跟打包输出的bundle中的其中一个同名。否则在打开页面时会提示找到不到名称为XXX的bundle之类的错误。
- 不要在
template中直接用<link>标签引入导出的样式文件
一开始我尝试直接用<link>标签引入导出的样式文件，但是这样没有成功，因为webpack开发模式和生产模式请求静态文件的路径不同。而django-webpack-loader会帮我们根据配置生成不同的路径。
比如{% render_bundle 'app' 'css' %}在开发模式时会生成如下内容：
<link type="text/css" href="http://localhost:3000/assets/bundles/app.css" rel="stylesheet"/>
而在生产模式时会生成：
<link type="text/css" href="/static/bundles/prod/app.css" rel="stylesheet"/>
这些路径对应开发模式的webpack配置：
config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/';
和 Django 配置文件中指定的静态文件目录STATICFILES_DIRS，和bundle目录WEBPACK_LOADER：
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/prod/', # change when production
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json'), # change when production
}
}
网友评论