Vue, App与我(十一)

最新推荐文章于 2023-07-24 18:38:22 发布

前端Baymax

最新推荐文章于 2023-07-24 18:38:22 发布

阅读量742

点赞数 2

分类专栏：趣味前端文章标签： app vue-js

本文链接：https://blog.csdn.net/XXJ19950917/article/details/77996380

版权

趣味前端专栏收录该内容

61 篇文章 2 订阅

订阅专栏

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文档。

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( 大家可以选择性的进行配置 );
- otherhashTypes, e.g. sha1、md5、sha256、sha512;
- otherdigestTypes, 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。

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

提取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。