前端SSR(服务器端渲染)是目前Web应用中的热门技术。Vue作为一种流行的前端框架，提供了开发SSR应用的良好支持。而Webpack则是构建这类应用的主要工具之一。本文将分享Webpack构建Vue SSR应用的最佳实践。
1. 理解前端SSR
首先，我们需了解SSR是什么。它是Web应用的一种运行方式，是将应用的渲染处理在服务端完成，最终发送到浏览器中，在浏览器中呈现出应用页面。这种方式可有效提高首屏加载速度，从而提升用户体验。
要实现SSR应用，我们需要在构建应用时对编译出的代码进行特殊处理，使其能够在服务端渲染出页面结果。Vue提供了一个 server-renderer 模块，专门为SSR应用服务。Webpack需要做的便是在构建时将它所依赖的Vue相关代码纳入打包范围，确保应用运行无误。
2. 配置Webpack
Webpack配置是构建SSR应用的关键。以下是一些建议。
2.1 配置入口与出口
在webpack配置文件中，我们需要指定应用的入口文件和输出目录。
以下是一些示例代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ ------------------
------- -
----- ----------------------- --------
--------- -------------------
-------------- -----------
-
--其中，entry表示应用的入口文件路径，这里指向的是server端代码。在output配置中，我们需要指定输出的目录，还需要给输出文件指定一个名字和常用的 Node.js 格式。通过libraryTarget选项可以指定如何导出library。
2.2 配置模块解析
在SSR应用中，我们需要能够解析Vue相关的.runtime.js文件。
首先，确保在package.json中加入alias。
以下是一些示例代码：
-- -------------------- ---- -------
-- ------------
-
------- -------------
---------- --------
------- ------------
---------- -
-------- ---------
--
--------------- -
------ ----------
---------------------- ---------
--
-------- -
------- -------------------------
-
-建议使用alias自动解决.vue文件导入相关的问题。这里的vue$别名，代表解析引入 vue 模块时，对应的是Vue的runtime-only构建版本，因为SSR的场景下不需要操作DOM，使用runtime-only构建时代码体积更小，完美适用于此场景。如果你的SSR应用使用组件中的template选项，你可以选择vue/dist/vue.esm.js来代替。关于 Vue 的不同构建请在官网中查看相关文档。
2.3 配置模块加载器
在开发SSR应用时，我们需要特意关注在客户端和服务端使用不同的加载器，避免冲突。在开发环境中，可以使用webpack-dev-middleware中间件来完成加载器的管理。
以下是一些示例代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-----
------- -
------ -
-
----- ---------
------- -------------
-------- -
------ -----
------- -----------------------------------
-
--
-
----- --------
-------- ---------------
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--有部分代码值得注意，其中ssrId选项告诉Vue编译器在编译时使用服务端渲染Id, ssrCss选项告诉webpack生成的客户端包用于正确导入 CSS 的位置，用户最终渲染的原理是服务端预先渲染的HTML结构为基础，使用客户端JS代码激活，并监听事件，进行增量更新达到动态渲染目的。
2.4 配置插件
在配置webpack的过程中，我们还需明确需要使用哪些插件。
以下是一些示例代码：
-- -------------------- ---- -------
-- -----------------
----- --------------- - ---------------------------------
----- - ------------------ - - ---------------------------------------------
----- - ------------------ - - ---------------------------------------------
-------------- - -
-----
-------- -
--- ------------------
-- --------
--- ---------------------
-- -------
--- --------------------
--------- ------------------------------
--
-
--值得注意的是，我们需要使用不同的插件用于客户端和服务端。VueSSRClientPlugin用于构建出客户端包的时候生成HTML文件需要用到的json文件。而VueSSRServerPlugin用于服务端构建，在跑起来之后需要获取html结构然后才能渲染出我们的页面。因此，我们需要将两个插件都引用进来。
3. 工程细节
完整的工程细节包括以下几部分内容：
- 添加
babel.config.js配置。
以下是一些示例代码：
// babel.config.js
module.exports = {
presets: [['@babel/preset-env', { modules: 'commonjs' }]],
plugins: ['@babel/plugin-syntax-dynamic-import']
};- 添加
server.js和vue.config.js。
以下是一些示例代码：
-- -------------------- ---- -------
-- ---------
----- ------- - -------------------
----- ---- - ----------------
----- -- - --------------
----- ----------------- - -------------------------------
----- ------ - -------------------- --- -------------
----- --------- - -----------------
----- --- - ----------
--- ---------
-- -------- -
----- ------------ - ---------------------------------------------
----- -------------- - -----------------------------------------------
-------- - ---------------------------- ----------------
- ---- -
---------------------------------------- -------------- --------------- -- -
-------- - ---------------------------- ----------------
---
-
-------- ---------------------------- --------------- -
----- -------- - ----------------
----------------------- -----------------------
-------
--
----- ------------ - ----------------------------------------------------
-------------
-
---------------- ------
---------
---------------
-
--
------ -------------
-
--------
-------------------------------------- -------- -
------------- -----
---------------- ------ ------
--
--
------------ ----- ---- -- -
----- ------- - - ---- ------- --
-------------------------------- ----- ----- -- -
-- ----- -
-----------------
------ ----------------------------- ------ --------
-
--------------
---
---
---------------- -- -- -
------------------- ------- -- -------------------------
----- -------------------- ---- -------
-- -------------
----- ---- - ----------------
----- ------- - -------------------
----- ------------------ - ---------------------------------------------
----- ------------------ - ---------------------------------------------
----- ------------- - ----------------------------------
----- ----------------- - -------------------------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- -------------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
-- ----
----- ------ - -------------------- --- --------------
----- ------- - -------------------- --- -------------
----- --- - ------------------- --- ---------
-------------- - -
-------------------- ------
---- -
-------- --- - ----- - -
--------- --------------------------
-------------- -----------------------
-
--
------------- ------ -- -
-- ------------
-------------
------------
------------------
------------ -- --
-----------
------------ -----
---
-- -------------------------- - -------
--------------------
--------- -------------------- -------
-- ---------------
----------------------------
----------------------------
------------ -- --------------------- -- --- - -------- ---- ---
-- ---------------------
------------------------------
-------------------------------------------- ---
----- -------------------- --------------------
--- ----------
------- ------
-----
-- ---------------------
-- ----- -
------------------------------------------
- ---- -
-- ------- --- ---- --- --- ----
-- ---- --------- --- ------ -- -- ---- ------ -- ------ --- ---
--------------------------------------
------------------------------------------------------ --
--------- --------------------------
-------------- -----------------------
----
-
--
----------------- --- - -------- -- -
------ -
-------- ------
------ ------------------------
------- -------
------- -
-------------- -----------
--
-- --- ------- - ---- ------------- -------------------
-- ----------------- ----- ---------------------- --------------------
-------- -
------ -
---- -------------------- ------
--
----------- ------- ------- --------
--
---------- ---------------
-- ------------------------------
-- -------------------------
---------- ----------
---
------------- -
------------ -----
--
-------- -
--- ---------------------
--- -------------------
--------- -------------
--------- --------------------
------- -----
------- -
--------------- -----
------------------- -----
---------------------- ----
--
--------------- ------
---
--- --------------------
-
-
- - -
-------- -
-- -------
--- --------------------
--------- ------------------------------
--
--
------------- -
------------ -
------------ -
-------- -
------- ----------
----- ---------
---------- --
------------------- --
-------- -
-
-
--
---------- ---- --------------------------
-
--
---------- -
----------------- ----
-
--
4. 测试
启动开发测试服务，在本地查看。
以下是一些示例代码：
npm run dev
浏览器访问 http://localhost:8080/ 即可查看。
如果你的构建好了上生产代码，直接使用您的应用服务器启动脚本即可。
5. 总结
在本文中，我们了解了构建Vue SSR应用的最佳实践和通常使用Webpack来做的工作。
最佳实践：
- 了解前端SSR，理解在所需构建中使用Webpack的必要性;
- 使用Webpack添加适当的配置;
- 适当考虑工程细节;
不仅如此，我们还深入了解了如何使用Webpack有效地构建Vue SSR应用，并附有相关的代码示例。希望这篇文章能对你有所帮助，如果你有什么想要分享的内容，欢迎您发布意见反馈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a4008968c7c53b061130f