构建多页面应用——优化(二)

时间 2019-11-16

标签构建页面应用优化繁體版

原文原文链接

最近，一直尝试使用webpack作多页面应用的开发。而且一个实际的项目为原型，实现对一个静态的企业站进行优化。原站点地址，测试站点地址。css

若是想要作一个本身个我的博客，或者企业官网来讲，有必定的参考意义。html

webpack的`resolve.alias`

在作模块化开发的过程当中，有一个须要解决的问题就是引用模块的路径问题。webpack

注：在webpack中，每个文件（不论是js，css, html，仍是图片等）都被称之为一个块。git

为了实现模块化，细粒度化的控制，每每会将代码块分红为不可分割的块，这样作虽然方便了管理控制，可是也会形成项目的文件嵌套很严重，再饮用的时候须要格外当心路径，同时也会形成开发者的负担（抛开其余不讲，但从技术角度来讲，对于开发人员来讲，能用一行代码解决的问题，毫不用两行，能少输入一个单词就少输入一个）。github

而webpack的resolve.alias能够为指定路径的字符串起别名。在本文所使用的示例，这样定义别名：web

...
resolve: {
  alias: {
    '@': path.join(__dirname, '..', 'pages/'), // 根目录
    '@css': path.join(__dirname, 'assets/css/'), // css
    '@img': path.join(__dirname, 'assets/imgs/'), // picture
    // '@font': path.join(__dirname, 'assets/fonts/'),
    '@data': path.join(__dirname, 'pages/data/'), // mock data
    '@utils': path.join(__dirname, 'pages/utils/') // snippets code
  }
},
...

固然，上面的别名并非万能的，有一个问题就是background-iamge 和 font-face 的使用url()会有一些问题，url()中的路径必须是字符串，暂时没有好的办法解决。数据库

可是使用sass，能够定义变量，能够经过变量来指定路径，可是要严格控制引用变量模块的文件的目录，在本文所使用的示例中，统一将应用变量文件assets/css/path.scss的文件，控制在两个层级。具体可参考所提供源代码中的具体使用。npm

模拟数据

实际的项目没有使用任何一种语言的后端代码，更不用说数据库。所有使用的是模拟数据。后端

为了方便管理维护项目的模拟数据，将项目的全部数据统一整理到了示例的pages/data目录下。sass

静态资源图片的处理

第一优化的时候，就简单的讲了下，如何使用imagemin提供的插件，来实现对常见类型（.jpg，.png，*.gif）图片的处理。

第一种引用图片的方案

以前作单页面应用开发的时候，喜欢将全部的图片优化处理后统一放在一个目录中，而后将它们放在服务器中，最后在开发或生产环境中，使用绝对路径进行访问。

这种方式的好处是不用担忧相对路径形成的路径问题。可是缺点是，操做起来不方便，尤为是开发环境。由于你不知道项目究竟要使用多少的静态资源，尤为是使用哪一种静态资源。

这种方式在团队合做的项目中，比较常见，可是对于提高团队的效率并不明显。

第二种引用图片的方案

因此，对于开发者来讲，若是若是须要什么静态资源，就放在本身的本地目录，这样能够为所欲为的添加。

在本文所采用的示例中，我作了一些尝试，将全部的图片资源进行了分类。须要转化为base64的图片放一个文件夹assets/imgs/base64/，须要合成雪碧图的单独放在一个文件夹；assets/imgs/sprites/，为了方便管理合成不一样雪碧图的源图片，我又在该目录下建立了子文件夹；而对于<img src="..." />要引用的图片的存放使用了两个文件夹，assets/imgs/static存放了未经优化的全部的图片，而目录assets/imgs/others，存放了全部优化过的图片（包含两部分，一部分是使用npm run img命令优化的assets/imgs/static目录下的图片，另外一部分是npm run dev命令优化的雪碧图图片，它的前缀带有*-sprite这样的后缀）。

这种方案，使用的是相对路径应用图片。可参考pages/data/contactus.js文件的代码：

const loadImg = require('@utils/load-img')

module.exports = {
  cn_name: '联系咱们',
  en_name: 'CONTACT US',
  img: loadImg('second/contactus-tag.png'),
  ...
}

而工具代码片断loadImg的代码以下：

module.exports = function(str) {
  return require('@img/other/' + str)
}

源代码

webpack4.x multi-page