webpack + react 优化：缩小js包体积 - 博客频道 - CSDN.NET
每一个不曾编码的日子,都是对生命的辜负。
分类：前端React
学校这边的项目刚组建好开发团队，前一段时间都在考虑如何前后端分离，如何多人协作开发的问题，恰好上一周陪女朋友去承德写生，能暂时放下工作和学校的事物，有了更多的思考时间。假期期间学习了webpack，并将前端代码进行了迁移，实现了前后端分离。
而最近上线的时候发现打包压缩后的js包达到了477k,首屏渲染时间高达4s，首屏渲染时间超过1.5s都是不能忍的，于是开始尝试研究一下webpack，毕竟只看了几个小时就拿来用了。
剧透，剧透，后面优化到284k，首屏渲染1.5s-2s。
这个时候想起以前boss和我聊职业规划的时候说过，“会用一项技术的人有很多，而出了问题懂得最大程度优化处理的人却没几个”，虽然他举的例子是搜索引擎优化，要高大上得多，但深入学习，积极对待的心态是一样的。谢谢他的引导。
前面啰嗦有点多，下面简单说说这次优化的思路。要想解决问题，必先了解问题，我去看了打包后的js，发现了一些问题及优化点。
js确实混淆压缩了，可是里面含有大量的开源库的copyright信息，可以去掉。
（开源大牛们要相信我是尊重以及无敌崇拜你们的，为了性能暂时去掉这些信息，后期会在产品上单开一个页面说明自己用了哪些库以及给出链接（Facebook和Instagram都这样））
引入的React没有切换到产品版本，React给出了下面的提示，良心！
Warning: It looks like you’re using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See
for more details.
之前将css也打包进js里面了，因为css和js并行加载，所以可以将css分离出来，因为js远大于css，所以首屏渲染时间绝大部分只受js下载时间影响，看图：
①压缩时去掉js所有注释，包括copyright信息。
在webpack.config.js文件的plugins数组里面添加及配置插件即可。
关于uglify的更多配置，请.
new webpack.optimize.UglifyJsPlugin({
comments: false,
compress: {
warnings: false
从477k 缩小到了408k，go ahead.
②将React切换到产品环境，参考如下：
同样在plugins里面添加：
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
这时候注意打包的时候要带上node的环境设置，例如：
NODE_ENV=production webpack --config webpack.production.config.js --progress
从408k缩小到326k，还可以更进一步。
先安装webpack插件：
npm install extract-text-webpack-plugin --save
在webpack配置文件中使用插件：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
plugins: [
new ExtractTextPlugin("bundle.css")
最后326k = 284k（js） + 37.6k（css）.
附上完整的webpage配置文件：
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
path.resolve(__dirname, 'app/main.jsx')
path: __dirname + '/server/public',
publicPath: '/',
filename: './bundle.js'
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
{ test: /\.(jpg|png)$/, loader: "url" },
{ test: /\.js[x]?$/, include: path.resolve(__dirname, 'app'), exclude:/node_modules/,loader: 'babel-loader' },
resolve: {
extensions: ['', '.js', '.jsx'],
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false,
compress: {
warnings: false
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
new ExtractTextPlugin("bundle.css")
四，更进一步
1.5s-2s的首屏渲染时间还不理想，但学校的项目要求也不高，不过对自己的要求应该一如既往，后期会尝试从下面几个方向去优化，希望能有更多的实践经验和大家分享。
将js分离，不同页面加载不同的js；
将React剥离出去，使用
既然用了React，可以尝试后端渲染；
虽然还不完美，但是进步总是值得肯定的，一步步来吧。
code_for_free
排名：千里之外
（3）（6）（5）（8）如何用webpack打包一个网站应用？ - 简书
下载简书移动应用
写了2733字，被12人关注，获得了20个喜欢
如何用webpack打包一个网站应用？
随着前端技术的发展，越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现，让我们了解了解用起来吧！今天我来介绍一下如何用webpack打包一个网页应用。
一般我们写页面，大概都是这样的结构：
index.html
...........
这样我们的html里直接引用css和js，完成一个网页应用。用webpack也类似，只是webpack把图片、css和js都编译打包成一个文件，我们只需要引用一个文件就可以了。1.我们需要先安装node环境。没安装的请自行安装2.在项目目录下输入npm init初始化一个node项目，输入项目名称等信息，完成后生成一个package.json文件。3.在项目目录下安装webpack
npm install --save-dev webpack4.我们需要一个webpack.config.js文件，记录webpack配置信息。它的配置大概这样：
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
//入口文件
index : './src/js/index.js'
extensions: ['', '.js', '.json', '.css', '.less'],
path: buildPath,
//编译后的文件路径
filename: 'app.js'
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
//.js 文件使用 babel 来编译处理
{ test: /\.js$/, loader: 'babel' },
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
module.exports =
我们需要指定编译的入口文件和输出的目录路径，以及css和js用什么loader处理，比如我使用了less，要编译less文件，就指定less-loader，js我要用es6来写，为了兼容性，用babel来转成es5的代码。如果要使用react，也可以指定jsx等的编译方式。
5.这些loader都是需要npm安装的
npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015
6.如果需要用babel，在项目目录下新建一个名为.babelrc的隐藏文件，里面这样写：
{"presets":["es2015"]}
7.根据配置可以看到我们需要一个src文件夹和一个build文件夹，src放图片、css和js的源代码，build作为输出文件夹放编译后的文件。
8.src/js/index.js文件作为我们的入口文件，我们在里面可以愉快地写es6的代码，比如：
'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);
可以看到css我们都通过require的方式引进来，这样webpack会把css和js打包进一个文件。9.我们还差个index.html，放在项目文件夹下就可以，正常写，引入build/app.js就可以啦！10.让我们试试吧，在命令行项目目录下运行webpack，哇，成功！
Time: **2622**ms
**Chunks**
**Chunk Names**
**app.js**
**[emitted]**
+ 10 hidden modules
可以看到app.js已经生成啦！
如果我们不想每次修改都手工编译，直接执行webpack --watch就会自动监听文件修改，自动编译。
如果我们想压缩混淆代码，执行webpack -p吧！
如果配置文件不叫webpack.config.js，也可以运行webpack --config *.js指定配置文件。
webpack功能强大，这里只是指引小白开始使用，想深入了解的童鞋快去看官方文档吧！
打赏1块钱，请我吃根雪糕吧！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
玩转简书的第一步，从这个专题开始。
想上首页热门榜么？好内容想被更多人看到么？来投稿吧！如果被拒也不要灰心哦～入选文章会进一个队...
· 124013人关注
记录、分享前端知识，让前端飞一会
· 4123人关注
爱前端，在路上，希望结伴而行。
· 3819人关注
打赏1块钱，请我吃根雪糕吧！
选择支付方式：基于webpack的前端工程化开发解决方案探索（1）：动态生成HTML - Web前端当前位置:& &&&基于webpack的前端工程化开发解决方案探索（1）：动基于webpack的前端工程化开发解决方案探索（1）：动态生成HTML&&网友分享于：&&浏览：0次基于webpack的前端工程化开发解决方案探索（一）：动态生成HTML　　Hello，大家好！在前面三章中我们与大家分享如何使用webpack来完成前端的模块化打包工作，并附带了一些简单的案例实现，算是webpack的一个入门吧。
从这一章开始，我们将陆续为大家介绍如何使用webpack来完成前端工程化开发。
　　1.什么是工程化开发
　　软件工程的工程化开发概念由来已久，但对于前端开发来说，我们没有像VS或者eclipse这样量身打造的IDE，因为在大多数人眼中，前端代码无需编译，因此只要一个浏览器来运行调试就行了。但是时至今日，互联网特别是移动互联网为前端开发带来了更大的机会，同时前端代码也变得越来越复杂，越来越难以管理，因此前端工程化开发的工作可以说是刻不容缓。
　　那么前端工程化开发到底需要解决哪些前端工程师们火烧眉毛的问题呢？个人认为至少包含以下几点：
　　1.&专业的IDE支持，完成包括项目初始化，语法提示，项目编译，打包等工作。
　　2.&良好的模块化代码管理结构，模块化可以使我们编写的组件或者代码达到高度复用，降低代码间的耦合性；同时可以良好的与第三方组件兼容。
　　3.&简单易配置的前端测试环境，完成组件的单元测试，页面的集成测试；同时提供良好的DEBUG环境，可以很好的定位错误的所在以及错误的详细信息。
　　4.&静态资源（图片/字体/CSS/JS等）的良好管理方案，一是静态的文件版本问题，二是对于小图标自动转BASE64,减少HTTP请求
　　5.&完整的代码版本管理，打包，发布，多环境部署，测试反馈等运维支持
　　当然，以上只是个人意见。每个公司、每个项目的情况不一样，所需要的条件都会有所不同。
　　以上这些需求，在以前基本上都是不敢想象的，这些工具都需要访问文件系统或者网络，很少有比较完整的解决方案。（好了，早期也有类似于Ant这样的Java解决方法，对前端开发人员要求过高而且不是很好用）好在，伟大的NodeJs诞生了，于是乎，基于NodeJs出现了很多优秀框架，像Grunt和 Gulp等。
　　好了，今天的主题是webpack！让我们来看下webpack作为后起之秀，是如何对前端工程化进行支持的！
　　　2. 动态生成HTML
　　大家注意，这里所说的动态生成HTML，是指我们使用webpack来动态产生我们最终所期望的HTML文件，而不是指在浏览器运行时使用JS生成HTML片段。
　　那为什么要动态生成HTML，我自己写不行吗？答案当然是可以的。
　　之所以要动态生成，主要是希望webpack在完成前端资源打包以后，自动将打包后的资源路径和版本号写入HTML中，达到自动化的效果。
　　大家可以回想一下我们之前的三篇文章中介绍的案例，在那个练手的项目中，我们页面上的script标签是我们自己写的，那么如果我们需要给JS添加上版本号的话，岂不是每次都的去修改？还有CSS，都是内嵌在JS中的，待JS加载后再创建style标签，然后写入css内容。这么做的话，浏览器需要先等待JS加载完成后，才能生成CSS样式，页面上会有一个等待过程，这个过程页面是完全没有样式的。这当然不是我们所想要的。
　　我们的目标是：webpack根据指定的模板，插入打包编译后CSS文件路径；插入打包生成的JS的文件路径。并且还需要为二者添加版本号。另外，我们还可以同时将HTML进行压缩，进一步减少文件大小。
　　3.初始化项目、安装依赖
　　我们这里默认大家的开发环境已经安装了npm以及webpack，尚未安装的同学可以自行安装。
　　A.新建一个空项目，然后通过& &npm& init& &&&对项目进行初始化，按照提示输入项目的基本信息，然后生成package.json文件。这个文件里面会保存我们即将安装的一些npm插件信息，便于二次移植开发。
　　B.安装项目所需依赖：
　&&&npm install css-loader
style-loader html-webpack-plugin --save-dev& 　　npm install extract-text-webpack-plugin --save-dev&&&　　
　　依次为css加载器，jquery，style加载器，HTML生成插件以及文件提取插件。
　　最终package.json的依赖声明得到更新：
"devDependencies": {
"css-loader": "^0.23.0",
"extract-text-webpack-plugin": "^0.9.1",
"html-webpack-plugin": "^1.7.0",
"jquery": "^1.11.3",
"style-loader": "^0.13.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
　　4.&创建目录，添加测试文件
　　准备就绪，我们开始创建项目目录：
#代码开发目录
#css目录，按照页面（模块）、通用、第三方三个级别进行组织
#JS脚本，按照page、components进行组织
#webpack编译打包输出目录，同样按照css/js/img进行组织
+ node_modules
#所使用的nodejs模块
package.json
webpack.config.js
#webpack配置
　　dist目录也可以不创建任何子目录，这里为了方便查看，将js/css/html分开存放。
　　然后我们在src目录创建几个测试文件，详细的代码大家可以前往 &查看源码。
　　我们先来看下index.js的内容：
1 //引入CSS
2 require("../../css/lib/reset.css");
3 require("../../css/common/global.css");
4 require("../../css/page/index.css");
6 document.write('Hello Index Js');
　　代码很简单，主要是引入了几个css文件。再看下我们的 /view/index.html&这个模板的内容
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Index主页&/title&
&meta name="author" content="/xiaoyunchen/webpack"/&
&meta name="date" content=""/&
&meta name="description" content="基于webpack的前端工程化开发解决方案探索"/&
作者：/xiaoyunchen/webpack
描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
&p&Hello,Webpack!!&/p&
时间：/xiaoyunchen/webpack
描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
　　这是一个简单的HTML模板，值得一提的是我们在这里并没有引入任何的CSS和JS，我们希望通过webpack打包来自动生成。（这里的模板还支持 ）
　　5. webpack配置
　　最后是我们的重头戏，webpack.config.js，我们将在这里配置一些webpack任务，来完成我们的需求：
1 var path=require('path');
2 var webpack = require('webpack');
3 var ExtractTextPlugin = require("extract-text-webpack-plugin");
4 var HtmlWebpackPlugin = require('html-webpack-plugin');
5 module.exports={
index:"./src/js/page/index.js",
path: path.join(__dirname,'dist'),
publicPath: "/webpack/dist/",
filename: "js/[name].js",
chunkFilename: "js/[id].chunk.js"
loaders: [
{test: /\.css$/, loader:ExtractTextPlugin.extract("style", "css") }
new ExtractTextPlugin("css/[name].css"),
//单独使用style标签加载css并设置其路径
new HtmlWebpackPlugin({
//根据模板插入css/js等生成最终HTML
favicon:'./src/img/favicon.ico', //favicon路径
filename:'/view/index.html',
//生成的html存放路径，相对于 path
template:'./src/view/index.html',
//html模板路径
inject:true,
//允许插件修改哪些内容，包括head与body
hash:true,
//为静态资源生成hash值
//压缩HTML文件
removeComments:true,
//移除HTML中的注释
collapseWhitespace:false
//删除空白符与换行符
　　这个配置文件再之前的文章中我们已经讲过很多次了，这里就不在赘述，只对其中几点比较关键的点进行分析：
　　17行：css加载器，只是这里改用了文件提取插件，将css提取出来单独作为一个文件进行存储。
　　21行：配置提取出来的css文件名以及存放路径
　　22行：&这是webpack中生成HTML的插件，里面有详细的配置说明，大家可以前往查看。
　　　　23行：配置favicon，通过webpack引入同时可以生成hash值
　　　　24行：配置最终生成HTML文件存放路径
　　　　25行：我们所使用的模板
　　　　26行：允许webpack修改哪些内容，可选值为head和body，true的话是都可以修改
　　　　27行：为静态资源生成hash值
　　　　28行：压缩最终生成的HTML文件，相关配置参数请前往&查看。（这里为了方便后面查看，没有移除HTML中的空白符与换行符。）
　　OK，下面我们在项目的根目录下运行&webpack&打包命令完成项目打包：
　　打包成功后，我们前往/dist/view目录下查看生成的index.html是什么样
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Index主页&/title&
&meta name="author" content="/xiaoyunchen/webpack"&
&meta name="date" content=""&
&meta name="description" content="基于webpack的前端工程化开发解决方案探索"&
&link rel="shortcut icon" href="/webpack/dist/favicon.ico?69fedd3895c"&&link href="/webpack/dist/css/index.css?69fedd3895c" rel="stylesheet"&&/head&
&p&Hello,Webpack!!&/p&
&script src="/webpack/dist/js/index.js?69fedd3895c"&&/script&&/body&
　　可以看到生成的文件除了保留原模板中的内容以外，还根据入口文件index.js的定义，自动添加需要引入CSS与JS文件，以及favicon，同时还添加了相应的hash值。
　　运行这个文件，可以看到代码正常，引入的文件路径也都OK！
　　是的，我们最初想要通过动态生成HTML的目的达到了。
　　webpack根据指定的模板，插入打包编译后CSS文件路径；
　　插入打包生成的JS的文件路径。并且还需要为二者添加版本号。
　　另外，我们还可以同时将HTML进行压缩，进一步减少文件大小。
　　今天的分享就到这里。可能大家还有些疑问：按需加载的JS/CSS也会被提取出来吗？下一章我们将继续探索这个问题。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有彻底解决Webpack打包性能问题
前端早读课
前言周五周会的时候团队的童鞋分享了webpack，那今天趁热来看看@王伟嘉童鞋是如何优化提高编译速度。本文经作者授权转载～正文从这开始～这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶，当然同时引入了 Webpack 作为打包工具。但是开发过程中遇到一个很棘手的问题就是，React 加上 React-Router、superagent、eventproxy 这些第三方轮子一共有好几百个 module，Webpack 的打包速度极慢。这对于开发是非常不好的体验，同时效率也极低。问题分析我们先来看一下完全没有任何优化的时候，Webpack 的打包速度（使用了jsx和babel的loader）。下面是我们的测试文件：运行在我的2015款RMBP13，i5处理器，全SSD下，性能是这样的：没错你没有看错，这几个第三方轮子加起来有整整668个模块，全部打包需要20多秒。这意味着什么呢？你每次对业务代码的修改，gulp 或者 Webpack 监测到后都会重新打包，你要足足等20秒才能看到自己的修改结果。但是需要重新打包的只有你的业务代码，这些第三方库是完全不用重新打包的，它们的存在只会拖累打包性能。所以我们要找一些方法来优化这个过程。配置externalsWebpack 可以配置 externals 来将依赖的库指向全局变量，从而不再打包这个库，比如对于这样一个文件：我们来看看性能，因为不用打包 React 了所以速度自然超级快，包也很小：配置externals的缺陷
Ctrl+D&将本页面保存为书签，全面了解最新资讯，方便快捷。