澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-08-10 09:55 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

react博客开发记录之首屏优化,p压缩打包react报语

前言

小结一下自家所知晓的首屏优化的方案:

  1. 通过webpack的UglifyJsPlugin插件对代码举行削减
  2. 领取第三方库
  3. 通过webpack落成按需加载
  4. 透过服务器对代码举行gzip压缩
  5. 劳务器端渲染首屏

loader和plugins的界别是:前者管理单个文件,而后人成效于全数打包进度

近些日子在用webpack打包react代码的时候开采二个题目,做四个甩卖总结分享出来给大家,上边来一块看看详细的介绍:

上边将具体介绍一下这两种方案的运用

** 1、通过webpack的UglifyJsPlugin插件对代码实行压缩 **

透过轻易的UglifyJsPlugin配置能够将代码压缩至原本的四分之二大小

new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })

** 2、提取第三方库 **

像 react , redux之类的库和我们的源代码放在一同打包,体量确定会十分的大。所以能够在 webpack 中设置:

entry:{
        vendor:['react','redux']
    },
plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
  ]

如此我们只需求在html中引进vendor.js就行了

** 3、通过webpack达成按需加载 **

因此与react-router+webpack同盟大家得以达成按需加载(react router文书档案传送门),上一段代码:

<Route path='/message' getComponent={
    (nextState ,cb) => {
        require.ensure([] , (require) => {
            cb(null,require('./routes/message/index.jsx'));
        },'message');
    }
} />

如上是博客demo留言区的路由,再看webpack:

output:{
        path: __dirname '/bundle/',
        publicPath:'/bundle/',
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js'
    }

大家只要求在output中布置好文件名就行

** 注意 **:public帕特h是设定以http央求的办法呼吁静态能源的路子

因而分割我们就不要求一回将整站加载下来,大大的裁减了首屏加载时间,当然个人以为即使页面相当少可能文件自个儿相当的小没须求选拔按需加载,gzip或然更符合

博客demo达成了按需加载-。-,能够到博客demo在线地址开采调控台在Network里查看。

** 4、通过服务器对代码进行gzip压缩 **

通过webpack的UglifyJsPlugin插件后,博客demo还会有1.15M对此笔者的话也是个相当的大的多寡,那时候不得不惊叹,gzip真心庞大,经过gizp压缩,博客demo变成了300k左右。

至于nginx配置能够参照他事他说加以考察谷歌(Google)或百度时而的答案

嵌入插件:BannerPlugin

能够在包装后的文件上边增加备注新闻,如版权表明等

// webpack.config.js
var webpack = require("webpack");
module.exports = {
    entry:  [__dirname   "/main.js"],
    output: {
        path: __dirname   "/dist",
        filename: "bundle.js",
    },
    devtool: 'eval-source-map',
    plugins: [
        new webpack.BannerPlugin('版权所有,翻版必究')
    ],
}

// main.js
require('./index');

// index.js
alert(123);

装进后的bundle.js尾部多了一行字:

图片 1

我的webpack配置:

村办总计

举个例子利用非常小,使用UglifyJsPlugin+gzip就能够满足首屏的渴求,无需折腾按需加载,按需加载适用于非常的大型的页面多的施用,强行按需加载只会扩充要求量,gzip压缩效果也不会那么生硬,严谨选择按需加载

点自身看demo源码,假使对你有一点点扶持,希望能随手star

[原稿地址:[)
[1]: http://blog.mdzzapp.com/#/article/博客开发之react首屏优化?_k=kdjtut
应接各样研商,补充和引导

HtmlWebpackPlugin

 依照多少个加以的html,生成另一个html。新的相比较旧的,内容一模一样,只不过多了bundle.js的引进而已,也正是说生成新html的进程就自行引进了打包后的公文,那对于bundle.js文件名不固定的景色下拾贰分有用,因为是webpack帮大家引进的,所以大家向来就不须求去关怀这几个bundle.js文件的名字

npm install --save-dev html-webpack-plugin

布局文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:  [__dirname   "/main.js"],
    output: {
        path: __dirname   "/dist",
        filename: "bundle.js",
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname   "/index.html"
        })
    ],
}

变动插件实例的还要钦点要管理的html文件,生成新的html文件输出到了ouput.path目录中,私下认可前后五个文本名是保持同样的

当打包过个公文时,通过插件对象中的chunks属性配置要打包进去的chunk名,打包成多个html就钦点多少个插件对象就可以。能够参照他事他说加以考察这里:

var webpack = require('webpack');
//打包less插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//这里的'./css/bundle.css'设置打包地址
var ExtractLess = new ExtractTextPlugin('./css/bundle.css');
//打包多个文件插件
//var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var path = require('path');
module.exports = {
 entry:[
  './reactDom/index.js'
 ],
 output:{
  path:'./build',
  filename:'indexReact.js'
 },
 module:{
  loaders:[
   {test: /.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel',query:{presets:['es2015','react']}},
   {test:/.less$/,loader:ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
   //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
   { test: /.(png|jpg)$/, loader: 'url-loader?q=8192'}

  ]
 },
 resolve:{
  extensions:['','.js']
  },

 plugins:[
  ExtractLess,

 ]
};

CleanWebpackPlugin

本条插件用于先河打包以前,把相称的文件删除掉。若是笔者的出口目录中有如下3个js文件:

图片 2

自个儿准备把以bundle开首的js文件都剔除,能够安排如下:

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    entry:  [__dirname   "/main.js"],
    output: {
        path: __dirname   "/dist",
        filename: "bundle-[hash].js",
    },
    plugins: [
        new CleanWebpackPlugin(['dist/bundle-*.js'])
    ],
}

如此重复创设后就只剩余二个bundle-xxx.js文件了(打包前去除了七个,打包后又变卦了三个)。

 这么些插件在拉开webpack -w 重新包装的情景下不试行。当实行webpack的时候才实践。

率先次施行的时候实践:

图片 3

检查测量试验到文件产生变化,重新包装不实施(未有去除文件的操作):

图片 4

地方看上去一切通常,运营webpack -w时候也绝非其他难题

UglifyJsPlugin 和 DefinePlugin

那三个插件基本都以同盟起来使用的。参照他事他说加以考察这里的座谈:

DefinePlugin:对被重视的js源文件内容中的特定标记符进行沟通。

UglifyJsPlugin:对js文件进行语法深入分析,以缩小、移除dead block等。

测试:

// module/myUtils.js
function add(a,b){
    if(process.env.NODE_ENV !== "product" &&(a == 0 || b == 0)){
        console.log('[myUtil] add by zero')
    }
    return a   b;
}

module.exports = {
    add:add
};

// main.js
const util = require("./module/myUtils")
alert(util.add(1,0));

//webpack.config.js
const webpack = require('webpack')
module.exports = {
    entry: {
        bundle: './main.js'
    },
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"' process.env.NODE_ENV '"'
        })
    ]
};

实践(注意下边包车型客车product和&&之间不能有空格,不然那些空格也会被增多到处境变量中去,对应的值会形成:“product ”)

set NODE_ENV=product&& webpack

包裹后的文件有那样一段代码:

function add(a,b){
    if(false){
        console.log('[myUtil] add by zero')
    }
    return a   b;
}

分明以上这段代码存在冗余的代码段,除了增Gavin件大小外没任何用处。使用UglifyJsPlugin来去除,在铺排文件中多增添一个插件:

new webpack.optimize.UglifyJsPlugin()

装进后的文书,这段代码直接成为这样了:

function e(n, t) {
    return n   t
}

以上进程通过在库文件中检查评定情状变量(实际上是webpack通过插件实行标志符替换),完成了在生养或许开辟条件下的切换

本文由澳门威利斯人发布于网络资讯,转载请注明出处:react博客开发记录之首屏优化,p压缩打包react报语

关键词: 澳门威利斯人 JavaScr... react开发 webpack