Update webpack.config for better performance and support hot reloading #158
Comments
|
First I tried running the project on a windows machine (Windows 10), to see if it somehow ran better on windows for some reason (given that Office is a Microsoft product). My second solution was to start from scratch again, on the windows machine: 1. installing the office addin project generator2. generate a brand new Excel Add-in Creact Typescript Template3. Compare the difference between the projects.When comparing, I noticed that:
After doing this, I noticed that the project no longer swallowed up the device's memory, and remained at a acceptable level. So there must have been a bug in the version I was using, as this new one works substantially better 🥳 But the reload time was still abysmally slow, which lead me to step 4. 4. Update the hot reloading configuration within the generated webpack file.I did this through a culmination of these three links:
After making the needed changes to the 5. Running the project on the mac againAfterwards, I tried running the project on my mac, and it runs just as smoothly as on the windows machine, only taking up about 1-2 gig of memory (as oppose to the 8-10) Final thoughtsI was thinking of writing a medium article on things to consider when working with a project like mine (incl. setup hot-reloading, seeing console logs, how to communicate with external api, setup a non azure based login approach) - I can post it here if people are interested :) |
|
I'm going to move this to the React project template repo and reopen it. |
Rick-Kirkham
changed the title
By all means 😁 |
It is definitely of interest. Thanks for your help. |
|
Absolutely no worries! Happy to contribute in any way I can 😁 Package.json// (...)
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
"react-refresh": "^0.14.2",
"react-refresh-typescript": "^2.0.9",
"fork-ts-checker-webpack-plugin": "^9.0.2",
}
// (...)Granted, I don't think I need the Webpack.config.js/* eslint-disable no-undef */
const devCerts = require("office-addin-dev-certs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
// Setup Hot-Reloading
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const ReactRefreshTypeScript = require("react-refresh-typescript");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const urlDev = "https://localhost:3000/";
const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION
async function getHttpsOptions() {
const httpsOptions = await devCerts.getHttpsServerOptions();
return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
}
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
vendor: ["react", "react-dom", "core-js", "@fluentui/react-components", "@fluentui/react-icons"],
taskpane: ["./src/taskpane/index.tsx", "./src/taskpane/taskpane.html"],
commands: "./src/commands/commands.ts",
},
output: {
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".html", ".js"],
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-typescript"],
},
},
},
// Setup Hot-Reloading
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader",
options: {
configFile: "tsconfig.json",
transpileOnly: dev,
...(dev && {
getCustomTransformers: () => ({
before: [ReactRefreshTypeScript()],
}),
}),
},
},
],
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader",
},
{
test: /\.(png|jpg|jpeg|ttf|woff|woff2|gif|ico)$/,
type: "asset/resource",
generator: {
filename: "assets/[name][ext][query]",
},
},
],
},
plugins: [
// Setup Hot-Reloading
dev && new ReactRefreshWebpackPlugin(),
new ForkTsCheckerWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: "assets/*",
to: "assets/[name][ext][query]",
},
{
from: "manifest*.xml",
to: "[name]" + "[ext]",
transform(content) {
if (dev) {
return content;
} else {
return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
}
},
},
],
}),
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["polyfill", "vendor", "taskpane"],
}),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["commands"],
}),
new webpack.ProvidePlugin({
Promise: ["es6-promise", "Promise"],
}),
],
devServer: {
hot: true,
headers: {
"Access-Control-Allow-Origin": "*",
},
server: {
type: "https",
options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
},
port: process.env.npm_package_config_dev_server_port || 3000,
},
};
return config;
}; |
|
Hi, We had to refresh the addin manually so that the addin got the latest updates. Please give some advice. |
|
Hey @DanielYKPan 😁 |
|
Thanks @suuunly ! 🙏 It was a good first step for me 👍 But I needed to add : to my webpack config to make it works 🤷 |
|
@TanguyFir, awesome. Happy it helped! 😄 |
Expected behavior
I was expecting when I run
npm run startin an office addin project, (which is the equivalent to:office-addin-debugging start manifest.xml), that the project starts up fairly quickly, and uses a reasonable amount of memory given that I have done nothing to the project yet.Current behavior
If I make changes in my project, and reload the addin from within Excel, then the memory usage jumps up to 10-11 gig, and then drops back down to 8.
Steps to Reproduce
Please provide detailed steps for reproducing the issue.
create a brand new excel addin react template, using the microsoft guide:
run the project using the
npm run startcommandmake a change in your project, and notice how it does not update (or at least not relatively quickly). Also notice the excessive memory usage, in your Activity Monitor
Is this expected behaviour? or am I missing something?
Context
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
The text was updated successfully, but these errors were encountered: