发表于 | 阅读次数:

前言

因为生活和工作方面原因,虽然有时还是在学习,但是开年后一直好久没有写文章了。简单地写点什么吧。

问题

通常我们在使用element-ui时都进行全局的加载,但是这会导致打出的包过大。所以为了减少包体积,我们进行按需加载。关于怎么实现按需加载,element-ui官方讲得很清楚,http://element-cn.eleme.io/2.3/#/zh-CN/component/quickstart。但是,并没有说怎么在nuxtjs中使用element-ui按需加载。(页面最后将了怎么使用nuxtjs使用element-ui,但是是全局加载)。

解决方案

  • 尝试(一)

    主要配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    //babel部分
     {
         presets: [
             ["es2015", {modules: false}],
             "stage-2"
         ],
         plugins: [
              "transform-vue-jsx",
              "transform-runtime",
              [
                   "component",
                   {
                        "libraryName": "element-ui",
                        "styleLibraryName": "theme-chalk"
                   }
              ]
         ]
     }
     //vendor部分
      vendor: ['axios', 'vue-lazyload', 'element-ui']
      
      //~plugins/element-ui.js
      import Vue from 'vue';
      import { Button } from 'element-ui'
      Vue.component(Button.name, Button)

打包后结果:

分析:

可以看出element-ui还是把全部都打包进去了,而不是按需加载了Button组件,这是为什么呢?

最终方案:

修改配置将vendor中的element-ui改为~plugins/element-ui:

1
vendor: ['axios', 'vue-lazyload', '~plugins/element-ui']

修改后结果:

修改后分析:

可以看见已经实现了按需加载。那为什么配置为~plugins/element-ui就能实现呢。其实,这和webpack的tree-shaking有关。当我们设置为element-ui时,打包过程中webpack会对element-ui进行tree-shaking处理。但是,element-ui默认会引用所有的组件,所以这时候tree-shaking并不会删减组件,起到按需加载的作用。但是当我们设置为~plugins/element-ui时,因为该文件中只使用了Button组件,使用tree-shaking会删除其他没有使用的组件,起到按需加载的作用。

提示:

使用tree-shaking需要注意1. 配置modules: false。2.压缩代码。 结束~~~

发表于 | 阅读次数: 
   之前一直使用第三方的NPM包对文件上传做处理,上周在了解具体的实现原理中,遇到了编码方面的问题
,然后又去了解了编码。

Ascii,GBK,Unicode 字符集

Ascii

  Ascii(美国信息交换标准代码),它是一套电脑编码系统,使用连续的字节状态来表示英文文字。Ascii是一种单字节的编码系统,以至于最多只能有2的八次方种状态。Ascii是美国人的标准,并不能把全世界的语言都表示出来。最后出现了很多其他的编译系统,比如我们的GBK。

GBK

  为了适应中国自己的需求,我们发明了一种GB2312编码:一个小于127的字符的意义与原来相同，但两个大于127的字符连在一起时，就表示一个汉字，前面的一个字节（高字节）从0xA1用到0xF7，后面一个字节（低字节）从0xA1到0xFE。但是中国的汉字太多了,还是没法满足我们的需要。于是在GB2312编码上进行扩展,只要第一个字节表示大于127就表示汉字,这种编码方式就是GBK。

Unicode

  当时各国都在各种搞一套,导致编码标准不统一。这时候国际标谁化组织开始统一标准,Unicode出现了。Unicode中对Ascii的127以下的编码方式保持不变,其他的重新进行编码。其中,Unicode目前普遍采用的是UCS-2(每2个字节表示一个符号),这导致之前使用Ascii表示的符号多出了1个字节。Unicode并不完美。直到互联网的出现，为解决unicode如何在网络上传输的问题UTF出现,这也是我们要重点讲解的编码。

Ascii,GBK,Unicode 和 UTF,UCS 区别

  Ascii,GBK,Unicode准确来说应该叫做字符集,对每个字符使用对应的唯一的代码值来表示,并没有规定使用多少个字节来表示。UTF,UCS是基于Unicode字符集的编码方式,使用对应的字节来表示字符。

阅读全文 »

发表于 | 阅读次数:

前言

  今天在对react做服务端渲染的时候,因为在使用antd组件的同时,也引用了对应的css文件,导致报错。错误信息:

1
2
/Users/xxx/xxx/node_modules/antd/lib/style/index.css:6
@font-face {

报错原因和解决方案设想

  • 报错原因
    因为服务端nodejs无法解析css,less等文件,导致报错。

  • 解决方案设想

  1. 将组件中的css,less文件的引用分离出来,不再引用less。
  2. 服务端对less文件的引用做处理。

方案实现

  • 第一种方案实现
      因为我这里使用的是antd,对组件样式的引用使用的是在.babelrc文件中设置[ "import", {"libraryName":"antd","style": "css"}],这里只需要删除掉"style": "css"这个配置即可,然后手动的将样式添加到HTML中的link标签中。
    但是这个方法是有很大缺陷
    阅读全文 »

发表于 | 阅读次数:

前言

  在写浅谈webpack2–学会配置(一)的时候,就想把plugins单独拿出来说。但是webpack使用了tapable来实现插件对事件订阅执行,使得插件和webpack打包流程密不可分,所以这篇文章就不得不提webpack的整个打包流程。

webpack打包流程

流程图

  了解tapable和webpack核心概念之后,我们来看一张webpack流程图,我们将根据这张流程图进行源码分析。

(这张图是来自网络)

配置和shell解析

  这是webpack打包流程的第一步。这一步分为2种不一样的情况:

  • 通过命令执行输入webpack中执行,程序会执行bin/webpack.js脚本文件。
  • 通过nodejs中require('webpack')执行,程序会去执行lib/webpack.js文件。
    阅读全文 »

发表于 | 阅读次数:

前言

  在写下一篇关于webpack2打包流程的文章之前,需要把webpack2中的一些概念来理一理。这样能提供更好的理解。

tapable

  webpack的整个流程是通过事件进行控制的。webpack在整个流程中对事件的执行顺序和错误的处理问题是需要考虑的,tapable刚好提供了这么一个解决方案。(tapable详细使用,自行查阅资料)

  • tapable事件流程控制事例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    const tapable = require('tapable');
    const Tapable = new tapable();
    Tapable.plugin('name', function (value, cb) {
      setTimeout(function () {
        console.log(value);cb(null,500);
      }, value)
    })
    Tapable.plugin('name', function (value, cb) {
      setTimeout(function () {
        console.log(value);cb(null,200);
      }, value)
    })
    Tapable.plugin('name', function (value, cb) {
      setTimeout(function () {
        console.log(value);cb(null,'end');
      }, value)
    })
    Tapable.applyPluginsAsyncWaterfall('name', 1000, function (err,result) {
      console.log("end",err,result)
    });
    /*执行结果
     1000
     500
     200
     end null end
     */

  执行结果遵循先入先出原则,当前事件的处理函数执行cb()后才会执行下一个处理函数。注:applyPluginsAsyncWaterfall中,前一个处理函数执行cb(null,value)传入的第二个参数value作为下一个执行函数的传入参数值。

阅读全文 »

发表于 | 阅读次数:

上周写了一篇关于require和module的文章,其中runMain函数中有一段代码这样的代码process._tickCallback();,不知道你们还记得不。这个代码其实和process.nextick有关系。

基础认知 Macrotask & Microtask

这里描述的知识点长话短说。
nodejs事件循环中,其实具有2种任务队列:Macrotask和Microtask。每次事件循环只会执行一个Macrotask队列中的任务,然后将Microtask队列中的所有任务执行完成。周而复始,直到结束。

  • Macrotask: setTimeout, setInterval, setImmediate, I/O, UI rendering

  • Microtask: process.nextTick, Promises, Object.observe, MutationObserver

    阅读全文 »

发表于 | 阅读次数:

一段报错信息

我们可以通过下面的一段报错信息,了解nodejs整个执行过程。我将根据整个执行过程,来进行源码的讲解,为源码添加大量注释来达到直观效果。

1
2
3
4
5
6
7
8
at Module._compile (module.js:569:30)
   at Object.Module._extensions..js (module.js:580:10)
   at Module.load (module.js:503:32)
   at tryModuleLoad (module.js:466:12)
   at Function.Module._load (module.js:458:3)
   at Function.Module.runMain (module.js:605:10)
   at startup (bootstrap_node.js:158:16)
   at bootstrap_node.js:575:3
阅读全文 »

发表于 | 阅读次数:

什么是跨域

由于浏览器同源政策。当前页面发起的请求的路径中,只要协议,域名,或者端口其中之一与本页面的路径不相同,就是跨域。

跨域方法

但是,因为业务需求,我们必须要进行跨域。跨域方法:

阅读全文 »

发表于 | 阅读次数:

学无止境、温故知新

故事是这样的

昨天，遇到个需求，需要做到类似于图一左边’good’模块的效果，当div滚轮滑动到最底部的时候，最外成文档不滑动。（注意，页面滚动其实是文档不是body）但是，正常情况下，效果应该类似于’bad’模块。

阅读全文 »

发表于 | 阅读次数:

本来不想写这篇文章的,因为大家已经很熟悉了,而且网络上已经太多太多了。但是,既然看见有人还在群里问,我也把基础的概念写写得了。

阅读全文 »