如何解决webpack打包后，dist文件过大的问题 - 简书
如何解决webpack打包后，dist文件过大的问题
我们在用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载。我们都知道图片的懒加载。当图片不出现在视口时，我们不加载这张图片。那么我们是不是可以实现，路由的懒加载。当我们用到某个路由后，才去加载对应的组件，这样就会更加高效。实现这样的功能，我们需要结合Vue的异步组件和webpack的code splitting feature。
下面开始研究路由的懒加载如何实现，以及它的效果。
首先，我们创建一个webpack模板的项目
vue init webpack my-project
cd my-project
npm install
我们添加路由，看下默认情况下，单页应用如何加载js。
我们先在src/components/创建一个文件New.vue
&template&
&h1&vue-router懒加载&/h1&
&h2&new doc&/h2&
&/template&
export default { }
在App.vue 文件添加两个链接
&template&
&div id="app"&
&router-link to="/"&Go to hello&/router-link&
&router-link to="/new"&Go to new&/router-link&
&router-view&&/router-view&
&/template&
在src/router/index.js 文件中添加路由
import Vue from 'vue'
import Router from 'vue-router'
import Hello from 'components/Hello'
import New from 'components/New'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Hello',
component: Hello
path: '/new',
name: 'New',
component: New
现在我们打包文件
npm run build
打包完后，打开页面（如何不能打开，请自行解决。我配置了nginx，所以可以直接打开）
http://localhost/mall/dist/index.htm#/
我们看下，打开网页后，加载了哪些资源。
现在，我们切换路由
http://localhost/mall/dist/index.htm#/new
我们发现，没有新的资源加载。因为一次性加载了所有js。如果你的应用很大，那么这个时候应用打开会很慢。
用路由懒加载，看看效果如何
修改src/router/index.js 文件
import Vue from 'vue'
import Router from 'vue-router'
// import Hello from 'components/Hello'
// import New from 'components/New'
Vue.use(Router)
// 把路由对应的组件定义成异步组件
const Hello = resolve =& {
require.ensure(['components/Hello.vue'], () =& {
resolve(require('components/Hello.vue'))
const New = resolve =& {
require.ensure(['components/New.vue'], () =& {
resolve(require('components/New.vue'))
export default new Router({
routes: [{
path: '/',
name: 'Hello',
component: Hello
path: '/new',
name: 'New',
component: New
打包成功后，再打开页面
http://localhost/mall/dist/index.htm#/
看下此时加载的资源
对比上一次，我发现此时加载的资源多了一个js文件。而这个js文件的内容包含了Hello.vue文件的所有内容。
下面我们切换路由
http://localhost/mall/dist/index.htm#/new
发现新加载了一个js文件。打开这个js,发现其中包含了，New.vue文件的所有内容。
现在，我们实现了按需加载组件，而不是一次性将所有js加载完。不必担心一次性加载完，导致页面迟迟打不开的情况。
修改New.vue文件
//增加了axios模块的引用
import axios from 'axios'
console.log(typeof axios, 11)
export default {
name: 'hello',
msg: 'Welcome to Your Vue.js App'
打包后，打开文件
http://localhost/mall/dist/index.htm#/new
你会发现用来异步加载New组件的js增大了很多，这是因为其中包含了axios的代码。
好了，路由懒加载的实现就这么简单。更多内容请看
前端开发爱好者。解决webpack打包慢的问题
本文参考了《彻底解决webpack打包慢的问题》/a/7638&
结合自己实践的例子。
整个过程分为三步：
1.打包dll包
2.引用dll包
3.打包业务代码
其中用到了webpack.DllPlugin和webpack.DllReferencePlugin插件。
注：我的webpack配置文件都是放在根目录下的webpackConfig文件夹下。
(1)打包dll包
首先新建一个config.dll.js文件，配置如下
var webpack = require('webpack');
var webpackConfig = {
'vendors': ['jquery','react', 'react-dom', 'react-router', 'react-redux', 'redux', 'react-router-redux','es6-promise','isomorphic-fetch']
path: './vendors/',
filename: '[name].config.dll.js',
library: '[name]'
loaders: [
test: /\.js$/,
loader: 'babel'
test: /\.css$/,
loaders: "style!css"
plugins: [
new webpack.DllPlugin({
path: './vendors/vendors_manifest.json',
name: '[name]',
context: __dirname
}; module.exports = webpackConfig;
entry的vendors值是要单独打包出来的模块
webpack.DllPlugin参数中：
--path是vendors_manifest.json文件的输出路径，这个文件会用于后续的业务代码打包；
--name是dll暴露的对象名，要跟output.library 保持一致；
--context是解析包路径的上下文，这个要跟接下来配置的config.dev.js 一致；
配置package.json的scripts，如下
"scripts": {
"wdll": "webpack --config ./webpackConfig/config.dll.js" },
然后命令行运行npm run wdll，打包dll包。
接下来会在根目录生成vendors文件夹，文件夹中包含vendors.config.dll.js 和 vendors_manifest.json&
(2)引用dll包
在html文件中引用上一步打包好的dll包，置于&/head&前，如下
&script src="vendors/vendors.config.dll.js"&&/script&
(3)打包业务代码
新建一个config.dev.js文件，配置如下
var webpack = require('webpack')
var path = require('path');
module.exports = {
'app': './src/Index.js'
path: './dist',
publicPath: "/dist/",
filename: '[name].bundle.js',
loaders: [
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
test: /\.css$/,
loader: 'style!css'
test: /\.scss$/,
loader: 'style!css!sass'
resolve: {
modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
extensions: ['', '.web.js', '.js', '.json'],
devtool: 'source-map',
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../vendors/vendors_manifest.json')
// 这个路径是相对于本文件的
webpack.DllReferencePlugin参数中：
--context 需要跟之前保持一致，这个用来引导webpack匹配 manifest 中库的路径；
--manifest 用来引入刚才输出的&vendors_manifest.json 文件；
配置package.json的scripts，如下
"scripts": {
"wdll": "webpack --config ./webpackConfig/config.dll.js",
"wdev": "webpack --config ./webpackConfig/config.dev.js --progress",
"wdevw": "webpack --config ./webpackConfig/config.dev.js --progress -w" },
然后命令行运行npm run wdev，打包业务代码。
最后在html文件夹中引用即可。09:40:30 UTC
需求：用webpack把reactjs、jquery、bootstrap打包成一个公用文件时出错。然后头部引用时出错。
错误提示：Uncaught Error: Bootstrap's JavaScript requires jQuery
代码如下：
var webpack = require('webpack');
module.exports = {
//webpack要解析的文件，此为多个进入点
jquery:"./public/javascript/libs/jquery.min.js",
bootstrapJs:"./public/javascript/libs/bootstrap/js/bootstrap.min.js",
bootstrapCss:"./public/javascript/libs/bootstrap/css/bootstrap.min.css",
minJs:"./public/style/style.css"
//webpack输出文件
path: __dirname+"/public/javascript/",
publicPath :"/public/javascript/",
filename: "bundle.js"
//模块解析
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.js$/, loader: "jsx",exclude:"node_modules" },
{ test: /\.(png|jpg)$/, loader: "url?limit=2500" },
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff2"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
//开启后缀自动补全功能
extensions:['','.js','.json']
13:01:27 UTC
对 jQuery 的依赖没搞定..
13:33:04 UTC
所以像这样第三方模块有依赖的话wepack怎么写？
13:53:06 UTC
我们项目里有个情况, 最后找了个 loader 解决掉的..
{test: require.resolve('jquery'), loader: 'expose?jQuery'},
14:38:07 UTC
expose-loader ? 原来这个是这么用的啊我之前一直没理解他说的暴露到全局是什么意思
01:09:16 UTC
对啊！不知道是不是加载顺序的问题。但是已经全部entry里面已经有加入jquery文件
01:27:21 UTC
（帖子被作者撤销，如无标记，将在 24 小时后被自动删除）
01:37:39 UTC
（帖子被作者撤销，如无标记，将在 24 小时后被自动删除）
03:25:24 UTC
只设置 entry 是无法解决第三方库依赖问题的。另外，你在 entry 里把第三方库都一起 bundle 了，这是不正确的，建议楼主去搜分离第三方库的方法。
对于题主的问题，我本人比较偏向不打包第三方库，而是在 webpack.config.js 中配置： externals: {
"react" : "React",
"jquery" : "jQuery",
"lodash": "_",
}并在页面基础模板，如 layout.jade（.html）中按顺序配置第三方库。那么 Webpack Bundle 时就不会出现依赖错误问题，也不需要引入其他 xxx-loader。
最后，对于 css/less 这类文件，如果题主对性能要求不是特别高的话，完全可以用 Webpack 的 ExtractTextPlugin 插件分离出来，调试的时候省事很多！
05:40:55 UTC
可惜这个ExtractTextPlugin似乎不支持热替换
07:13:47 UTC
将jquery配置到全局可以解决
报错问题。
load里面加： 提供的方法
{test: path.resolve(bower_dir, 'jquery/jquery.min.js'), loader: 'expose?jQuery'},//注释
将jQuery配置到全局，bootstrap.min.js里就能引用到。
02:33:56 UTC
这里有个demo 你可以看一下, 他是在index.jsx把jQuery暴露到window上面去了
20:19:21 UTC
之前一直在找类似的解决办法
bootstrap require jQuery 的解决办法应该用
webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
这会确保在bootstrap js中的 $ jQuery 使用当前resolve的jquery
另外一个concern是在windows里面access $ jQuery 或者是插件 bind $.fn.xxxxx这个的解决办法是使用expose-loader
{test: require.resolve('jquery'), loader: 'expose?$'}
这会确保在windows object里面 $ 会被理解为 jquer
接下来的concern是第三方插件有时候会require('jquery')这会导致出现$(...).xxx is not a function error 原因是插件绑定了自己的jquery这个的解决办法是
'jquery':path.join(__dirname, 'node_modules/jquery/dist/jquery')
这回确保所有插件绑定在我们import or require的jquery上
11:22:12 UTC
webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"