webpack进阶(三)

 1)CommonsChunkPlugin已经从webpack4移除,所以在用webpack进行公共模块的拆分时,会报错

Cannot read property 'CommonsChunkPlugin' of undefined

通过公共模块的拆分,最终合成的文件能够在最开始加载一次,比如两个入口文件都使用了lodash资源,那么可以使用CommonsChunkPlugin进行公共提取。【这是代码优化的一个方法】

webpack4对chunk的拆分进行了优化,替代它的是SplitChunkPlugin。

意思是,最初模块通过内部webpack的依赖图形成的父子链接关系,CommonChunkPlugin是为了避免它们之间的重复关系,webpack4以后为了支持optimization.splitchunks和optimization.runtimechunk选项,CommonChunkPlugin被删除,SplitChunksPlugin替代它更好的从事代码分割工作。

目前entry有两个入口文件,都引入了lodash,而dist打包生成的文件中含有两个入口文件的bundleJS,index.html,以及一个runtime.bundle.js和vendors~another~app.bundle.js。从名称可以看出:vendors是第三方库了,runtime貌似是按需加载。splitChunk配置规则中:按需加载的代码块并行请求的数量小于或等于5个。(后续慢慢研究,对于刚刚打算完整看完官网的我来说,先入门后再深入研究吧)

2)官网提供了些对于代码分离很有用的loader和插件:

ExtractTextPlugin:用于将CSS从主应用程序中分离。

bundle-loader:用于分离代码和延迟加载生成的bundle。

promise-loader:类似bundle-loader,但使用的是promises。

3)【bug警示!!!】因为import()是ES6的语法,其调用会在内部用到promises,所以在旧版本浏览器,或者低版本的安卓或IOS,要使用polyfill库(比如es6-promis或者promise-polyfill)来shim Promise。这两个库都是来模拟实现ES6的promise功能的。

4)output.chunkFilename:'[name].bundle.js',它决定非入口 chunk 的名称。

5)懒加载,按需加载。(一种优化网站的方式),ES6的import引入模块方法,必须指向模块的.default值,返回值是promise,可以使用then来处理:

import('./a.js').then(res=>{console.log(res)});

6)webpack的缓存问题,主要是打包后的文件/dist文件夹下面的内容,如果部署到服务器上,客户端向服务端获取资源比较费时,所以浏览器自己有缓存机制,通过缓存来减少带宽浪费,使得网站的加载速度更快,如果部署新版本时候文件名未做更改,浏览器认为没有更新就可以使用缓存版本。

所以,我们应该在打包时候,针对未做更改的文件打包时文件名仍应保持以前的,而只针对代码更新的文件打包时进行bundle文件名称的更新。所以需要在output.filename中进行文件名替换。[chunkhash] 。

output:{
        filename:'[name].[chunkhash].js',
        //chunkFilename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist'),
        //publicPath:'/'
    },

目前使用的是webpack4.29.5。发现尝试过几次后,针对未更新的文件打包后的bundle名称还是以前的,应该是webpack针对此做了优化吧,webpack4以前的版本针对bundle名称通过hash映射时,再次构建文件,文件名有时会变,有时则不变(不稳定)。

然而,我尝试在文件中再加了一个入口,发现dist文件下面的内容的hash都已经变化。

现在尝试修改下index文件,再看看hash变化:

未对demo做修改,只针对app里面的index修改,发现确实只改变了index.js的bundle包的hash值。【猜测新版本针对缓存模块做了优化!】

针对output的filename的hash有三种方式:hash,chunkhash以及contenthash。(可以重新开个博讲解下缓存机制的优化)

【Most Important!!!】webpack4.29.5的英文版官网已经更新,但是中文官网未及时更新,至此到这里,我之前的学习都是基于中文版本的官网,从这里将开始看英文官网,并且给出翻译和指引。

 

 

【完】

人生没有彩排,每一天都是现场直播!

 

posted @ 2019-02-28 14:10  tangjiao_Miya  阅读(406)  评论(0编辑  收藏  举报