New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack使用优化(基本篇) #2

Open
lcxfs1991 opened this Issue Jan 10, 2016 · 31 comments

Comments

Projects
None yet
@lcxfs1991
Owner

lcxfs1991 commented Jan 10, 2016

前言

本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos

为什么要使用Webpack

  1. 与react一类模块化开发的框架搭配着用比较好。
  2. 属于配置型的构建工具,比较用容易上手,160行代码可大致实现gulp400行才能实现的功能。
  3. webpack使用内存来对构建内容进行缓存,构建过程中会比较快。

第3点我想稍微论述一下,如果看过我之前写的《如何写一个webpack插件(一)》,会发现,webpack会将文件内容存在compilation这个大的object里面,方便各种插件,loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式,但感觉webpack更进一步。gulp是每一个任务(task)用一个流,而webpack是共享一个流。

简要回顾Webpack的配置

webpack_config

Webpack的配置主要为了这几大项目:

  • entry:js入口源文件
  • output:生成文件
  • module:进行字符串的处理
  • resolve:文件路径的指向
  • plugins:插件,比loader更强大,能使用更多webpack的api

常用Loaders介绍

  • 处理样式,转成css,如:less-loader, sass-loader
  • 图片处理,如: url-loader, file-loader。两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
  • 处理js,将es6或更高级的代码转成es5的代码。如:
    babel-loader,babel-preset-es2015,babel-preset-react
  • 将js模块暴露到全局,如果expose-loader

常用Plugins介绍

  • 代码热替换, HotModuleReplacementPlugin
  • 生成html文件,HtmlWebpackPlugin
  • 将css成生文件,而非内联,ExtractTextPlugin
  • 报错但不退出webpack进程,NoErrorsPlugin
  • 代码丑化,UglifyJsPlugin,开发过程中不建议打开
  • 多个 html共用一个js文件(chunk),可用CommonsChunkPlugin
  • 清理文件夹,Clean
  • 调用模块的别名ProvidePlugin,例如想在js中用$,如果通过webpack加载,需要将$与jQuery对应起来

使用优化

了解了以上介绍的Loaders和Plugins之后,基本就可以搭建一整套基于Webpack的构建(不需要gulp与grunt,合图除外)。下面让我来介绍一下在使用过程中的一些优化点。

优化点一.如何区分开发及生产环境

  1. 在package.json里面的script设置环境变量,注意mac与windows的设置方式不一样
"scripts": {
    "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors",
    "publish-win":  "set NODE_ENV=prod&&webpack -p --progress --colors"
}
  1. 在webpack.config.js使用process.env.NODE_ENV进行判断

优化点二.使用代码热替换

使用代码热替换在开发的时候无需刷新页面即可看到更新,而且,它将构建的内容放入内在中,能够获得更快的构建编译性能,因此是官方非常推荐的一种构建方式。

方法一:

1.将代码内联到入口js文件里
w1

2.启动代码热替换的plugins
w2

方法二:

直接实现一个server.js,启动服务器(需要启动热替换plugin),下面是我在业务中用到的一个范例。具体的一些参数可以

var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");

config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000");  // 将执替换js内联进去
config.entry.index.unshift("webpack/hot/only-dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
    hot: true,
    historyApiFallback: false,
    // noInfo: true,
    stats: { 
        colors: true  // 用颜色标识
    },
    proxy: {
        "*": "http://localhost:9000" // 用于转发api数据,但webpack自己提供的并不太好用
    },
});
server.listen(9000);

方法三:

直接在webpack.config.js上配置。这个办法最简单,当然灵活性没有自己实现一个服务器好。
w3

优化点三.import react导致文件变大,编译速度变慢,乍办?

  1. 如果你想将react分离,不打包到一起,可以使用externals。然后用<script>单独将react引入
    w1
  2. 如果不介意将react打包到一起,请在alias中直接指向react的文件。可以提高webpack搜索的速度。准备部署上线时记得将换成react.min,能减少文件大小(减少约600kb)
    w2
  3. 使用module.noParse针对单独的react.min.js这类没有依赖的模块,速度会更快。

优化点四.将模块暴露到全局

如果想将report数据上报组件放到全局,有两种办法:

方法一:

在loader里使expose将report暴露到全局,然后就可以直接使用report进行上报

{
    test: path.join(config.path.src, '/js/common/report'),
    loader: 'expose?report'
},

方法二:

如果想用R直接代表report,除了要用expose loader之外,还需要用ProvidePlugin帮助,指向report,这样在代码中直接用R.tdw, R.monitor这样就可以

new webpack.ProvidePlugin({
    "R": "report",
}),

优化点五. 合并公共代码

有些类库如utils, bootstrap之类的可能被多个页面共享,最好是可以合并成一个js,而非每个js单独去引用。这样能够节省一些空间。这时我们可以用到CommonsChunkPlugin,我们指定好生成文件的名字,以及想抽取哪些入口js文件的公共代码,webpack就会自动帮我们合并好。

new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            filename: "js/common.js",
            chunks: ['index', 'detail]
        }),

优化点六. 善用alias。

resolve里面有一个alias的配置项目,能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库,如react,我们最好可以直接指定它们的位置,这样webpack可以省下不少搜索硬盘的时间。
w6

优化点七. alias的索引路径。

有时候你的node_modules包可能会放在上层父文件夹中,这时你可以使用resolve.moduledirectories来扩张你的索引路径,例如我们给redux做一个alias:

 resolve: {
        moduledirectories:['node_modules', config.path.src],
        extensions: [".js", ".jsx",],
        alias: {
            'redux': 'redux/dist/redux',
        }
    },

这样的话,它的索引路径会如下:

/a/b/node_module/redux/dist/redux
/a/node_module/redux/dist/redux
/node_module/redux/dist/redux

要注意的是多加索引路径可能会导致性能下降,所以除非项目复杂,否则慎用这个功能。

优化点八.多个html怎么办

  1. 使用HtmlWebpackPlugin,有多少个html,就排列多少个,记得不要用inject,否则全部js都会注入到html。如果真的要用inject模式,请务必将不需要的js用exclude chunk去掉或者用chunk参数填上你需要入口文件。

仅使用app作为注入的文件:

plugins: [
  new HtmlWebpackPlugin({
    chunks: ['app']
  })
]

不使用dev-helper作为注入文件:

plugins: [
  new HtmlWebpackPlugin({
    excludeChunks: ['dev-helper']
  })
]

如果你不想用inject模式,但又想使用html-webpack-plugin,那你需要在html里用<script>标签放入对应的js,以及用入对应的css。记住,这些资源的路径是在生成目录下的,写路径的时候请写生成目录下的相对路径。

优化点九. html-webpack-plugin不用使inject模式没又md5,而且不支持文件内联怎么破?

当时我就给维护者提了一个issue--Add inline feature to the plugin

然后维护者在开发的分支上加了这么一个特性(证明维护者不想在插件里加内联功能了,想让我来弄):

事件
允许其它插件去使用执行事件
html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit

使用办法:

  compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
    htmlPluginData.html += 'The magic footer';
    callback();
  });

不过我还是决定自己开发一个了一个插件
html-res-webpack-plugin,有中英文文档可以参考。其实html-webpack-plugin以js作为入口可能跟webpack的理念更为一致,但其实直接在html上放link和script更加方便直白一些。而且html-webpack-plugin局限性太多,如果我想在script上加attribute也是比较麻烦的事儿。所以我干脆开发一个可以允许在html上直接放link和script而且支持内联及md5的插件。

但相信我之后也会针对html-webpack-plugin再写一个内联及md5的插件,适配一直在用这个插件的人。

优化点十.用gulp-webpack速度慢乍办

w3

上图是初始化构建30个文件的用时,一共用了13秒。用了externals优化后,还有100多kb,比用纯webpack优化要大50多kb。而且,由于你用的是gulp-webpack,每次有文件改动,都必须全部重新编译一次。因此,跟react搭配建议还是不要用gulp-webpack。因为如果你使用webpack的话,即使初次启动时速度也并不快,但开发过程中,webpack会自动识别,只会重新编译有修改的文件,这大大加快了编译构建速度。

没办法,老项目改造,真的要用,乍办?我提供以下思路
(1)当非js文件改变的时候,不要去跑js打包的任务
(2)非公共的js发生改变的时候,只执行这个js的打包任务

w4

下图是优化了之后,在开发过程中非公共文件修改后的编译速度。我的娘,纯webpack只需要100多200ms。建议还是用webpack吧。
w5

优化点十一.如果在通过webpack在项目中使用bootstrap, jquery以及fontawesome

这一点对于创业公司来说可能比较有用,它们的初期产品都需要快速上线,用一些比较成熟的UI框架会比较好。

这样,首先我们需要jquery文件,并且安装bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。还需要sass-loader(3.1.2)及less-loader(2.5.3)。

然后,在主要入口文件要这么引用下面的样式文件:

require('bootstrap/less/bootstrap.less');
require('font-awesome/scss/font-awesome.scss');
require('./index.scss');

在webpack.config.js的entry项目里,可以加上这个vendor:

common: ['jquery', 'bootstrap'],

在loaders里加入以下loader,将jQuery暴露到全局:

{
    test: path.join(config.path.src, '/libs/jq/jquery-2.1.4.min'),
    loader: 'expose?jQuery'
},

再添加以下loader,让webpack帮助复制font文件

{ 
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,  
        loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]' 
},

在plugins里添加ProvidePlugin,让$指向jQuery

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
}),

这样,就可以同时使用jQuery, Bootstrap和Fontawesome了。

webpack会取代gulp吗

  • 未必,但在开发环境,以及不需要一些功能如合图的情况下,webpack可以完全取代gulp,至少现在我有三个项目完全用webpack进行开发和部署上线
  • 要取代gulp,还需要不断发展它的loader以及plugin生态,至少,完善一下开发者文档啊。

有样版boilerplate项目吗

目前有一个还没有成型的,我先放在这里,目前可以通过查看gulpfile.js和webpack.config.js文件进行学习
steamer_branch_v2。要成为boilerplate还待我花一周时间整理。

推荐文章

开发工具心得:如何 10 倍提高你的 Webpack 构建效率

@lcxfs1991 lcxfs1991 changed the title from webpack使用优化 to webpack使用优化(持续更新,欢迎补充) Jan 10, 2016

@MeCKodo

This comment has been minimized.

MeCKodo commented Jan 11, 2016

至少,完善一下开发者文档啊

@lcxfs1991

This comment has been minimized.

Owner

lcxfs1991 commented Jan 11, 2016

你是指那个boilerplate吗?我这两天弄一下哈。

@MeCKodo

This comment has been minimized.

MeCKodo commented Jan 11, 2016

不是,重复了下webpack会取代gulp哈! :)
觉得webpack文档超乱 : (

@lcxfs1991

This comment has been minimized.

Owner

lcxfs1991 commented Jan 11, 2016

因为它是配置型的构建,所以内容比较多。而且例子也不足。
gulp属于任务型的,更多依赖插件,所以文档相对简单一些。

@cssmagic

This comment has been minimized.

cssmagic commented Jan 18, 2016

谢谢分享。对学习 Webpack 很有帮助 👍

另建议给代码块加语法着色效果。部分图片也可以以代码块的方式来显示。

@lcxfs1991

This comment has been minimized.

Owner

lcxfs1991 commented Jan 18, 2016

谢谢哈。有什么好的优化点都可以提出来,我整理一下。

@simongfxu

This comment has been minimized.

simongfxu commented Jan 25, 2016

感觉webpack还是很难取代gulp,有些功能在webpack中处理起来很自然(各种预处理的loader以及optimize、define等plugins),有些任务尤其是核心代码之外的感觉在gulp中更自然。

比如gulp-html-replace这个插件,做的工作其实和html-webpack-plugin差不多,但是这种任务其实和js/css代码关系不大,更多是核心代码之外的页面内容替换。
当然强行放在webpack里面也可以,但是总感觉哪里不对(我的webpack.config.js本来就50行左右,这个一加配置至少十来行,可能还需要自己写点代码)。但是放在gulp里面就感觉超自然的一个任务。

@cupools

This comment has been minimized.

cupools commented Mar 25, 2016

编译慢的问题可以试试这个 webpack-hot-middleware,配合 webpack-dev-middleware 可以在文件改动时只编译相关的文件而不需要全部重新编译

@ogoodo ogoodo referenced this issue Mar 30, 2016

Closed

webPack 参考 #12

@moocss moocss referenced this issue Apr 7, 2016

Open

Webpack 学习 #28

@dericgit

This comment has been minimized.

dericgit commented Apr 11, 2016

webpack 在使用extract-text-webpack-plugin 抽取出css时, css 中的 相对路径会被改变

例:
在app.vue 中 style 有 .shop {background: url('../images/experience/page1_background.jpg') center center no-repeat;}

在经过 new ExtractTextPlugin('./css/styles.[contenthash].css')
生成后文件目录:
indx.html
js/
css/style.[contenthash].css

.shop {background: url(./images/page1_background.jpg) center center no-repeat;}

@lcxfs1991

This comment has been minimized.

Owner

lcxfs1991 commented Apr 11, 2016

@dericgit 恩。应该是会根据你图片的生成路径去调整的。毕竟你src文件夹下面img和css的相对位置跟你最终生成的时候可能会不一样

@FrendEr

This comment has been minimized.

FrendEr commented Apr 16, 2016

请教一下个问题:
如果我给 react 配置了别名

resolve: {
            extensions: ['', '.js', '.jsx', '.es6', 'css', 'scss', 'png', 'jpg', 'jpeg'],
            alias: {
                'react': path.join(NODE_MODULES_PATH, '/react/dist/react.js')
           }
}

但我的项目依赖的一个第三方库中的一个组件 module1.js 存在这样的引用

var PropTypes = require('react/lib/ReactPropTypes');

在我的项目编译的时候,就会出错

Module not found: Error: Cannot resolve 'file' or 'directory' myProject/node_modules/react/react.js/lib/ReactPropTypes in myProject/node_modules/thirdFrame/module1

那么,问题是:像这种配置别名的使用,如何做一个容错处理?毕竟第三方库如何引用一个文件是不可控的。

@lcxfs1991

This comment has been minimized.

Owner

lcxfs1991 commented Apr 16, 2016

目前确实没有办法。

不过开发环境直接设react的alias,react官方并不建议,因为有些warning和报错会没掉。

而生产环境的话,一般建议将react单独外链,可用externas : {react: React}

@lcxfs1991 lcxfs1991 changed the title from webpack使用优化(持续更新,欢迎补充) to webpack使用优化(基本篇) Apr 17, 2016

@bluemsn

This comment has been minimized.

bluemsn commented Apr 19, 2016

谢谢分享

@zhouyupeng

This comment has been minimized.

zhouyupeng commented Jun 28, 2016

早看到就好了 解释的很详细和深入

@draco1023

This comment has been minimized.

draco1023 commented Sep 12, 2016

谢谢分享

@superfighter

This comment has been minimized.

superfighter commented Sep 22, 2016

看帖回帖是美德。

@zhangbg

This comment has been minimized.

zhangbg commented Oct 1, 2016

不错

@nimojs

This comment has been minimized.

nimojs commented Oct 21, 2016

webpack-stream 开启 watch 模式后速度会快很多

@johvin

This comment has been minimized.

johvin commented Oct 31, 2016

很实用,mark

@Joyeuxman

This comment has been minimized.

Joyeuxman commented Jan 5, 2017

看帖回帖是美德。干货。

@fly39244080

This comment has been minimized.

fly39244080 commented Jan 5, 2017

我也觉得很不错,谢谢分享

@RystLee

This comment has been minimized.

RystLee commented Jan 9, 2017

受益匪浅~ 👍

@qxqxqxqx

This comment has been minimized.

qxqxqxqx commented Jan 17, 2017

mark

@Emiya0306

This comment has been minimized.

Emiya0306 commented Jan 26, 2017

请问一下有没有关于在webpack编译之后,如何清除无用的thunk file文件的想法?

@alwayrun

This comment has been minimized.

alwayrun commented Feb 4, 2017

不错,谢谢分享

@NowhereToRun

This comment has been minimized.

NowhereToRun commented Feb 27, 2017

想请教一下怎么样能看到插件的依赖树呢?
就是我这个插件会依赖的别的哪些插件 还有具体版本

@lcxfs1991

This comment has been minimized.

Owner

lcxfs1991 commented Feb 27, 2017

@NowhereToRun 可以通过peerDependency来看?

@NowhereToRun

This comment has been minimized.

NowhereToRun commented Feb 27, 2017

@lcxfs1991 好像不是.. peerDependency是在配置里面指定插件版本吧?

我找到的是webpack是怎么管理插件的依赖树的,例如A插件里面引用了B、C、D插件,但是在写devDependencies时可能只会写到A, BCD插件是webpack自动下载下来了

@lcxfs1991

This comment has been minimized.

Owner

lcxfs1991 commented Feb 27, 2017

一般插件也主要是依赖webpack内置的插件,不过也有插件依赖loader的情况,例如html-res-webpack-plugin依赖html-loader,这个插件会在package.json指明。而如果是依赖内置插件的话,主要是通过peerDependency指定wepback版本即可。

@NowhereToRun

This comment has been minimized.

NowhereToRun commented Feb 27, 2017

@lcxfs1991 好的 谢谢。 我研究研究

@zhangjunlei26 zhangjunlei26 referenced this issue Mar 11, 2017

Open

Webpack #7

@7demo

This comment has been minimized.

7demo commented Apr 1, 2017

遇到一个css注入后又注入个同名空的js现象。

我的入口文件:

entry: Object.assign(entries(), {
        vender: ["jquery"],
        common: getJsModule(),
        css1: [path.resolve(__dirname, 'src/scss/base/_base.scss')],
        css2: [path.resolve(__dirname, 'src/scss/index.scss'), path.resolve(__dirname, 'src/scss/home.scss')]
     })

其中vender,common分别是第三方打包文件与业务共同文件。css分别是基础样式文件与业务样式,这个地方我预编译后抽出来了。

这个是我页面模板的配置:

var conf = {
              filename: '../views/' + v + '.html',
              template: './src/views/' + v + '.html',
              chunks: ['vender', 'common', jsPath, 'css1', 'css2'], //为各个页面引入对应的
              chunksSortMode: 'dependency' //根据依赖顺序加载文件,否则会出现加载问题
          }
          config.plugins.push(new HtmlWebpackPlugin(conf));

此处是动态生成的,v代表每个页面的名字,每个页面我都会插入共同的js/css,还有自己的业务js---jsPath.

然而奇怪的是,我编译后,页面head除了出入 两个css。在页面底部还分别注入了css1.js余css2.js。

这个多余的js文件是该如何去掉?还是我插入css有配置问题?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment