好程序员教程分享webpack打包文件太大怎么办

  • 时间:
  • 浏览:0
  • 来源:5分11选5APP下载_5分11选5APP官方

看起来好像挺麻烦,为什么在么在让通过 webpack 的 code split 以及配合 react router 就都都可以方便实现。具体的例子都都可以看下 react router 的官方示例 huge apps。不过这里还是讲下完后 配置踩过的坑。

}

}

bundler.run((err, stats) => {

let assets = stats.toJson().assets

let name

externals 对象的 key 是给 require 时用的,比如 require('react'),对象的 value 表示的是何如在 global 中访问到该对象,这里是 window.React。这完后 index.html 就变成下面就说



除了你你这人方式之外,还都都可以通过引用内外部文件的方式引入第三方库,比如像下面的配置

{

externals: {

webpack 自带了一两个 压缩插件 UglifyJsPlugin,只须要在配置文件中引入即可。

{

plugins: [

哪此是代码分割呢?各自 知道,一般加载一两个 网页也有把完全的 js 代码都加载下来。为什么在么在让对于 web app 来说,各自 更无需的是只加载当前 UI 的代码,没不得劲击的次要不加载。

加入了你你这人插件完后 ,编译的速率单位会明显调快,就说 一般只在生产环境启用。

另外,服务器端还都都可以开启 gzip 压缩,优化的效果更明显。

对于静态文件,第一次获取完后 ,文件内容没改变得话,浏览器直接读取缓存文件即可。那为什么在么在让缓存设置过长,文件要更新为什么在么在会么会办呢?嗯,以文件内容的 MD5 作为文件名就说 一两个 不错的出理 方案。来看下用 webpack 应该何如实现

}

}

fs.stat(config.buildTemplatePath, (err, stats) => {

设置缓存

不然得话,webpack 在加载 chunk 的完后 ,路径会出错。

手动调用 webpack 的 API,获取打包后的文件名,通过 writeTemplate 更新 html 代码。完全代码猛戳 gitst。

})

})

代码压缩

plugins: {

好多多任务管理器 员教程分享webpack 打包文件太满为什么在么在会么会办,webpack 把各自 所有的文件都打包成一两个 JS 文件,就说 即使你是小项目,打包后的文件也会非常大。下面就来讲下何如从多个方面进行优化。

代码分割

for (let i = 0; i < assets.length; i++) {

}

像 react 你你这人库的核心代码也有 627 KB,就说 和各自 的源代码放进同時 打包,体积肯定会很大。就说 都都可以在 webpack 中设置

{

entry: {

bundle: 'app'

}

}

}

目前推荐用 DLL 的方式提取第三方库。

code split 是不支持 ES6 的模块系统的,就说 在导入和导出的完后 千万要注意,不得劲是导出。为什么在么在无需导出组件的完后 用 ES6 的方式,这完后 不管导入是用 CommomJs 还是 AMD,也有失败,为什么在么在让还无需报错!

当然,自己更推荐第某种方式。

当然会踩到你你这人坑也是为什么在么在让我完后 才用 NodeJS,为什么在么在让一入门就说 用 ES6 的风格。除了你你这人之外,还有其他也要注意,在生产环境的 webpack 配置文件中,要去掉 publicPath

提取第三方库

]

}

output: {

打包后的文件名加入了 hash 值

const bundler = webpack(config)

就说 打包完后 就会多出一两个 vendor.js 文件,完后 在引入各自 自己的代码完后 ,也有先引入你你这人文件。比如在 index.html 中

就说 子,各自 就都都可以把文件的缓存设置得很长,而无需担心更新间题。

去除何必 要的插件

output: {

刚结速用 webpack 的完后 ,开发环境和中产环境用的是同一两个 webpack 配置文件,愿因生产环境打包的 JS 文件包含了一大堆没必要的插件,比如

HotModuleReplacementPlugin, NoErrorsPlugin基因重组代码