Vue, App与我(十一)

￡神魔★判官ぃ 2022-06-08 05:24 149阅读 0赞

# Vue，App与我(十一) #

## 前言: ##

### 打包文件: ###

*  Big-man今天要进行一次大胆的尝试，将默认的css以及js文件打包为一个文件的，另外去打包为两个文件，也就是所谓的css打包为css, js打包为js，这样尝试会不会改变加载的速度。

--------------------

*  `extract-text-webpack-plugin`:
 *  由于`Vue`在配置默认的打包文件也就是`webpack`, 所以在这里面进行修改需要用到`Webpack`的打包方法，[extract-text-webpack-plugin][]，这里是这个库函数的源码地址和介绍简介，中文直接翻译过来的意思是**提取文本插件**——将文本从包中取出，或将其捆绑到一个单独的文件中。

--------------------

### 安装： ###

*  首先是**安装**：
 *  `for WebPack 3`:
 *  `npm install --save-dev extract-text-webpack-plugin`
 *  `for WebPack 2`:
 *  `npm install --save-dev extract-text-webpack-plugin@2.1.2`
 *  for WebPack 1
 *  `npm install --save-dev的extract-text-webpack- plugin@1.0.1`
 *  如果你的项目是前后端分离的话，可以在你的`package.json`上写上`extract-text-webpack-plugin`的配置版本文件。例如：

"devDependencies": {
        "webpack": "^1.0.1",
        "extract-text-webpack-plugin": "^1.0.1"
    }

*  类似于上述的配置，把它配置到你的项目中，然后`npm i/install`或者如果使用了淘宝的软件的话可以`cnpm i/install`, 它就会自动去安装到`node_modules (library root)`文件下了，这个是你引用的工具库文件。

--------------------

### 用法： ###

*  对于第一个webpack 版本1，如果大家也想像Big-man这样多去了解一些，那么可以去参照文档[WebPack 1文档][WebPack 1]。

const ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: "css-loader"
            })
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin("styles.css"),
      ]
    }

*  它将`*.css`输入块中的所有必需模块移动到单独的CSS文件中。所以你的样式不再内联到JS包中，而是在一个单独的CSS文件`（styles.css）`中。如果您的**总样式表卷**大，则会更快，因为CSS捆绑包与JS捆绑包**并行加载**。如果你的打包文件不是特别大的话，不建议去使用分包处理代码，因为分别打印为两个包会增加`http请求`的负担。但是Big-man如今的`build.js`文件已经到达了`1M`左右，这是没有对代码进行优化的缘故，所以Big-man需要对项目浏览的加速从几方面进行考虑。在这里Big-man就不进行赘述了，这里主要分析的是Big-man觉得最为困难的**分包处理机制**设计与实现。

--------------------

### 上述代码打包之后的优劣势分析： ###

*  优势/劣势：
 *  较少的风格标签（低版本的IE浏览器存在限制）/ 存在额外的`HTTP`请求;
 *  CSS SourceMap（含`devtool: "source-map"` 和 `extract-text-webpack-plugin ? sourceMap`） / 需要等待比较长的编译时间;
 *  CSS并行请求 / 没有运行时需要修改公共路径（publicPath）;
 *  CSS缓存分开 / 没有热模块进行更替(No Hot Module Replacement)；
 *  更快的运行时间（较少的代码以及较少的DOM操作） / 这个不存在劣势;

--------------------

### 选项： ###

*  `new ExtractTextPlugin(options : filename | object);`
 *  **名称**/类型/描述
 *  **id**/\{ string \} / `extract-text-webpack-plugin`这个插件的唯一标识。（这个仅限于大家对于比较复杂以及需要很高的项目进行设置使用，默认情况下自动生成）;
 *  **filename**/\{ String | Function \} / 结果文件的名称可能包含`[name]`, `[id]`和`[contenthash]`;
    
     *  **allChunks**/ \{ Boolean \} / 从所有附加块中提取（默认情况下，它仅从初始块中提取），当使用`CommonsChunkPlugin`并且`ExtractTextPlugin.extract`在公共中提取块（从）时，`allChunks`**必须**设置为true。
     *  **disable** / \{ Boolean \} / 禁用插件
     *  **ignoreOrder** / \{ Boolean \} `false`默认情况下禁用顺序检查（这个只是对CSS模块有用！）
 *  `[name]` name of the chunk(大块的名字);
 *  `[id]` number of the chunk(大块的数量);
 *  `[contenthash]` hash of the content of the extracted file(提取文件散列的内容);
 *  `[<hashType>:contenthash:<digestType>:<length>]` optionally you can configure( 大家可以选择性的进行配置 );
    
     *  other`hashType`s, e.g. `sha1`、`md5`、`sha256`、`sha512`;
     *  other`digestType`s, e.g. `hex`、`base26`、`base36`、`base49`、`base52`、`base58`、`base62`、`base64`;
     *  and `length`, the length of the hash in chars（字符串中的哈希长度值）。
     *  `ExtractTextPlugin`生成一个文件**每个目录**，然而对于每个目录的话，但是存在多个目录的话就需要使用`[name]`、`[id]`或者`[contenthash]`——`ExtractTextPlugin` generates a file per entry, so you must use `[name]`, `[id`\] or `[contenthash]` when using multiple entries。
 *  **\#extract**:

ExtractTextPlugin.extract(options: loader | object)

*  从现有加载程序创建一个提取加载程序。支持类型的装载机`{ loader: [name]-loader -> {String}, options: {} -> {Object} }`。
 *  名称 || 类型 || 描述
 *  `options.use` || `{String}`/`{Array}`/`{Object}` || 用于将资源转换为CSS导出模块的`Loader`(必需)。
 *  `options.fallback` || `{String}`/`{Array}`/`{Object}` || `style-loader`当CSS未被提取时应该使用加载器（例如：在附加的块中`allChunks: false`）。
 *  `options.publicPath` || `{ String }` || 覆盖`publicPath`此装载机的设置。

--------------------

*  **多个实例**:
 *  `extract`实例上还有一个功能。如果你有多个实例，你应该使用它 `ExtractTextPlugin`。

--------------------

### 提取Sass以及Less文件 ###

*  提取CSS文件`extract-text-webpack-plugin`文件，那么大家可能存在和Big-man一样的疑问了，那就是`Sass`和`Less`文件能不能允许打包了，答案肯定是可以的，因为原理是相通的，切换出`Sass-loader`用于`less-loader`在必要时。

const ExtractTextPlugin = require('extract-text-webpack-plugin');
    module.exports = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              //resolve-url-loader may be chained before sass-loader if necessary
              use: ['css-loader', 'sass-loader']
            })
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin('style.css')
        //if you want to pass in options, you can do so:
        //new ExtractTextPlugin({
        //  filename: 'style.css'
        //})
      ]
    }

--------------------

### 修改文件名: ###

*  `filename`参数可以是`Function`。它通过`getPath`处理格式，`css/[name].css`并返回真实的文件名，`css/js/a.css`。大家可以换`css/js`，`css`然后大家会得到新的路径`css/a.css`。

entry: {
      'js/a': "./a"
    },
    plugins: [
      new ExtractTextPlugin({
        filename:  (getPath) => {
          return getPath('css/[name].css').replace('css/js', 'css');
        },
        allChunks: true
      })
    ]

--------------------

### 总结: `Extract-Text-Webpack-Plugin`: ###

*  由于`vue`的文件里面都是html+css（less/sass）+js，并且这三种文件是合并到了一个文件当中的，这是vue的好处同是也有些许的麻烦，因为你不知道提取css文件内部的实现细节是什么的。如果需要了解其中的细节的话，需要大家跟Big-man一样进行具体的实例操作，不然的话理解起来还是不那么得心应手的。
 *  更多详情以及源码参见: [Extract-Text-Webpack-Plugin][]。

--------------------

> JackDan9 Thinking

[extract-text-webpack-plugin]: https://github.com/webpack-contrib/extract-text-webpack-plugin
[WebPack 1]: https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/webpack-1/README.md
[Extract-Text-Webpack-Plugin]: https://github.com/webpack-contrib/extract-text-webpack-plugin#usage